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GETTING  STARTED 


The  2014  release  of  Adobe  Flash  Professional  CC  provides  a  comprehensive 
authoring  environment  for  creating  interactive  and  media-rich  applica¬ 
tions  that  you  can  publish  to  a  variety  of  platforms.  Flash  is  widely  used  in 
the  creative  industry  to  develop  engaging  projects  integrating  video,  sound, 
graphics,  and  animation.  You  can  create  original  content  in  Flash  or  import 
assets  from  other  Adobe  applications  such  as  Photoshop  or  Illustrator,  quickly 
design  animation  and  multimedia,  and  use  ActionScript  3.0  to  integrate 
sophisticated  interactivity. 

Use  Flash  Professional  to  generate  graphics  and  animation  assets,  to  build 
innovative  and  immersive  websites,  to  create  standalone  applications  for 
the  desktop,  or  to  create  apps  to  distribute  to  mobile  devices  running  on  the 
Android  or  iOS  system. 

With  extensive  controls  for  animation,  intuitive  and  flexible  drawing  tools, 
and  a  powerful,  object-oriented  coding  language,  Flash  delivers  one  of  the 
few  robust  multimedia  authoring  environments  that  let  your  imagination 
become  reality. 

About  Classroom  in  a  Book 

Adobe  Flash  Professional  CC  Classroom  in  a  Book  (2014  release)  is  part  of  the 
official  training  series  for  Adobe  graphics  and  publishing  software  developed 
with  the  support  of  Adobe  product  experts.  The  lessons  are  designed  so  you 
can  learn  at  your  own  pace.  If  you  re  new  to  Flash,  you  11  learn  the  fundamental 
concepts  and  features  you’ll  need  to  use  the  program.  Classroom  in  a  Book 
also  teaches  many  advanced  features,  including  tips  and  techniques  for  using 
the  latest  version  of  this  application. 
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What's  New 


The  2014  release  of  Adobe  Flash  Professional  CC  provides  more  expressive 

tools,  powerful  controls  for  animation,  and  robust  support  for  a  wider  variety  of 

playback  platforms. 

The  lessons  in  this  book  provide  opportunities  to  use  some  of  the  updated  features 

and  improvements  in  Flash  Professional,  including: 

•  The  new  Motion  Editor,  an  advanced  panel  for  creating  and  managing  complex 
motion  tweens  and  eases 

•  The  all-new  Variable  Width  tool,  which  allows  you  to  create  more  expressive 
lines  with  thick  and  thin  variation  for  static  or  animated  graphics 

•  Separate  Flash  document  types  that  are  specifically  configured  to  publish  to  a 
variety  of  platforms:  Flash  Player,  FITML5,  WebGL,  desktop  applications,  and 
mobile  apps  for  iOS  or  Android 

•  Support  for  SVG  (Scaleable  Vector  Graphics)  export 

•  Cross-platform  projectors  for  self-executable  desktop  applications 

•  JavaScript  code  snippets  for  FITML5  Canvas  projects 

•  An  object-level  Undo  command,  which  lets  you  undo  an  action  on  one  object 
independently  of  other  objects  that  may  have  been  modified  more  recently 

•  Integration  with  the  Kuler  panel,  a  cloud-based  application  to  create  color  themes 


Prerequisites 

Before  you  begin  using  Adobe  Flash  Professional  CC  Classroom  in  a  Book  ( 2014 
release ),  make  sure  your  system  is  set  up  correctly  and  that  youve  installed  the 
required  software.  You  should  have  a  working  knowledge  of  your  computer  and 
operating  system.  You  should  know  how  to  use  the  mouse  and  standard  menus  and 
commands,  and  also  how  to  open,  save,  and  close  files.  If  you  need  to  review  these 
techniques,  see  the  printed  or  online  documentation  included  with  your  Microsoft 
Windows  or  Apple  Mac  OS  software. 

If  you  re  working  on  Microsoft  Windows,  you  need  to  download  Apple  s 
QuickTime  software,  free  from  www.apple.com/quicktime/download/,  in  order  to 
work  with  the  videos  in  Lesson  9. 

In  addition,  you  need  to  download  the  free  Adobe  AIR  runtime,  available  at 
get.adobe.com/air/,  to  publish  desktop  applications  in  Lesson  10. 


2  GETTING  STARTED 


Installing  Flash 

You  must  purchase  the  Adobe  Flash  Professional  application  as  part  of 
Adobe  Creative  Cloud.  The  following  specifications  are  the  minimum  required 
system  configurations. 

Windows 

•  Intel®  Pentium  4,  Intel  Centrino®,  Intel  Xeon®,  or  Intel  Core™  Duo 
(or  compatible)  processor 

•  Microsoft®  Windows®  7  (64  bit),  Windows  8  (64  bit),  or  Windows  8.1  (64  bit) 

•  4  GB  of  RAM 

•  1024x900  display  (1280x1024  recommended) 

•  Java  Runtime  Environment  1.7  (included) 

•  QuickTime  7.7x  software  recommended 

•  4  GB  of  available  hard-disk  space  for  installation;  additional  free  space  required 
during  installation  (cannot  install  on  removable  flash  storage  devices) 

•  Broadband  Internet  connection  and  registration  are  necessary  for  required 
software  activation,  validation  of  subscriptions,  and  access  to  online  services. 

Mac  OS 

•  Multicore  Intel®  processor 

•  Mac  OS  X  vl0.9  64-bit,  10.8  64-bit,  or  10.7  64-bit 

•  4  GB  of  RAM 

•  1024x900  display  (1280x1024  recommended) 

•  Java™  Runtime  Environment  1.7 

•  QuickTime  10.x  software  recommended 

•  4  GB  of  available  hard-disk  space  for  installation;  additional  free  space  required 
during  installation  (cannot  install  on  a  volume  that  uses  a  case-sensitive  file 
system  or  on  removable  flash  storage  devices) 

•  Broadband  Internet  connection  and  registration  are  necessary  for  required 
software  activation,  validation  of  subscriptions,  and  access  to  online  services. 

For  updates  on  system  requirements  and  complete  instructions  on  installing  the 
software,  visit  www.adobe.com/products/flash/tech-specs.html. 

Install  Flash  from  Adobe  Creative  Cloud  at  creative.adobe.com/  and  make  sure  that 
you  have  your  login  and  password  accessible. 
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Accessing  the  Classroom  in  a  Book  Files 

The  lessons  in  Adobe  Flash  Professional  CC  Classroom  in  a  Book  ( 2014  release) 
use  specific  source  files,  such  as  image  files  created  in  Adobe  Illustrator,  video  files 
created  in  Adobe  After  Effects,  audio  hies,  and  prepared  Flash  documents.  To 
access  the  Classroom  in  a  Book  hies: 

1  On  a  Mac  or  PC,  go  to  www.peachpit.com/redeem  and  enter  the  code  found  at 
the  back  of  your  book. 

2  If  you  do  not  have  a  Peachpit.com  account,  you  will  be  prompted  to  create  one. 

3  The  downloadable  hies  will  be  listed  under  the  Lesson  &  Update  Files  tab  on 
your  Account  page. 

4  Click  the  lesson  hie  links  to  download  them  to  your  computer. 

The  hies  are  compressed  into  Zip  archives  to  speed  up  download  time  and  to 
protect  the  contents  from  damage  during  transfer.  You  must  uncompress  (or 
“unzip”)  the  hies  to  restore  them  to  their  original  size  and  format  before  you  use 
them  with  the  book.  Modern  Mac  and  Windows  systems  are  set  up  to  open  Zip 
archives  by  simply  double-clicking. 

5  On  your  hard  drive,  create  a  new  folder  in  a  convenient  location  and  name  it 
FlashProCC,  following  the  standard  procedure  for  your  operating  system: 

•  If  you  re  running  Windows,  right-click  and  choose  New  >  Folder.  Then  enter 
the  new  name  for  your  folder. 

•  If  you  re  using  Mac  OS,  in  the  Finder,  choose  File  >  New  Folder.  Type  the 
new  name  and  drag  the  folder  to  the  location  you  want  to  use. 

6  Drag  the  unzipped  Lessons  folder  (which  contains  folders  named  LessonOl, 
Lesson02,  and  so  on)  that  you  downloaded  onto  your  hard  drive  to  your  new 
FlashProCC  folder. 

When  you  begin  each  lesson,  navigate  to  the  folder  with  that  lesson  number  to 
access  all  the  assets,  sample  movies,  and  other  project  files  you  need  to  complete 
the  lesson. 

If  you  have  limited  storage  space  on  your  computer,  you  can  copy  each  lesson 
folder  as  you  need  it,  and  then  delete  it  after  youVe  completed  the  lesson  if  desired. 
Some  lessons  build  on  preceding  lessons;  in  those  cases,  a  starting  project  file  is 
provided  for  you  for  the  second  lesson  or  project.  You  do  not  have  to  save  any  fin¬ 
ished  project  if  you  don’t  want  to  or  if  you  have  limited  hard  drive  space. 
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Copying  the  sample  movies  and  projects 

You  will  create  and  publish  final  project  files,  such  as  SWF  files,  HTML  files,  vid¬ 
eos,  or  AIR  desktop  applications,  in  some  lessons  in  this  book.  The  files  in  the  End 
folders  (OlEnd,  02End,  and  so  on)  within  the  Lesson  folders  are  samples  of  com¬ 
pleted  projects  for  each  lesson.  Use  these  files  for  reference  if  you  want  to  compare 
your  work  in  progress  with  the  project  files  used  to  generate  the  sample  projects. 
The  end  project  files  vary  in  size  from  relatively  small  to  a  couple  of  megabytes,  so 
you  can  either  copy  them  all  now  if  you  have  ample  storage  space  or  copy  just  the 
end  project  file  for  each  lesson  as  needed.  Then  you  can  delete  it  when  you  finish 
that  lesson. 

How  to  Use  the  Lessons 


Each  lesson  in  this  book  provides  step-by-step  instructions  for  creating  one  or 
more  specific  elements  of  a  real-world  project.  Some  lessons  build  on  projects 
created  in  preceding  lessons;  most  stand  alone.  All  the  lessons  build  on  one 
another  in  terms  of  concepts  and  skills,  so  the  best  way  to  learn  from  this  book  is 
to  proceed  through  the  lessons  in  sequential  order.  In  this  book,  some  techniques 
and  processes  are  explained  and  described  in  detail  only  the  first  few  times  you 
perform  them. 

The  organization  of  the  lessons  is  also  project-oriented  rather  than  feature- 
oriented.  That  means,  for  example,  that  you’ll  work  with  symbols  on  real-world 
design  projects  over  several  lessons  rather  than  in  just  one  chapter. 

Additional  Resources 

Adobe  Flash  Professional  CC  Classroom  in  a  Book  ( 2014  release)  is  not  meant  to 
replace  documentation  that  comes  with  the  program  or  to  be  a  comprehensive 
reference  for  every  feature.  Only  the  commands  and  options  used  in  the  lessons  are 
explained  in  this  book.  For  comprehensive  information  about  program  features  and 
tutorials,  refer  to  these  resources: 

Adobe  Flash  Professional  CC  Help  and  Support:  helpx.adobe.com/flash.html 
is  where  you  can  find  and  browse  Help  and  Support  content  on  Adobe.com. 

Adobe  Flash  Professional  Help  and  Adobe  Flash  Professional  Support  Center  are 
accessible  from  the  Help  menu  in  Flash  Professional. 

Adobe  Creative  Cloud  Learn:  For  inspiration,  key  techniques,  cross-product 
workflows,  and  updates  on  new  features,  go  to  the  Creative  Cloud  Learn  page, 
helpx.adobe.com/creative-cloud/learn/tutorials.html.  Available  to  all. 
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Adobe  Forums:  forums.adobe.com  lets  you  tap  into  peer-to-peer  discussions, 
questions,  and  answers  on  Adobe  products.  The  Flash  Professional  forum  is 
accessible  from  the  Help  menu  in  Flash  Professional. 

Adobe  TV:  tv.adobe.com  is  an  online  video  resource  for  expert  instruction  and 
inspiration  about  Adobe  products,  including  a  How  To  channel  to  get  you  started 
with  your  product. 

Adobe  Inspire:  www.adobe.com/inspire.html  offers  thoughtful  articles  on  design 
and  design  issues,  a  gallery  showcasing  the  work  of  top-notch  designers,  tutorials, 
and  more. 

Resources  for  educators:  www.adobe.com/education  and  edex.adobe.com  offer 
a  treasure  trove  of  information  for  instructors  who  teach  classes  on  Adobe  soft¬ 
ware.  Find  solutions  for  education  at  all  levels,  including  free  curricula  that  use  an 
integrated  approach  to  teaching  Adobe  software  and  can  be  used  to  prepare  for  the 
Adobe  Certified  Associate  exams. 

Also  check  out  these  useful  links: 

Adobe  Add-ons:  creative.adobe.com/addons  is  a  central  resource  for  finding 
tools,  services,  extensions,  code  samples,  and  more  to  supplement  and  extend  your 
Adobe  products. 

Adobe  Flash  Professional  CC  product  home  page:  www.adobe.com/products/flash 


6  GETTING  STARTED 


Adobe  Authorized  Training  Centers 

Adobe  Authorized  Training  Centers  offer  instructor-led  courses  and  training  on 
Adobe  products.  A  directory  of  AATCs  is  available  at  partners.adobe.com. 
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ANIMATING  SYMBOLS 


Lesson  Overview 

In  this  lesson,  you  11  learn  how  to  do  the  following: 

•  Animate  the  position,  scale,  and  rotation  of  objects 

•  Adjust  the  pacing  and  timing  of  your  animation 

•  Animate  transparency  and  special  effects 

•  Change  the  path  of  an  object  s  motion 

•  Create  animation  inside  symbols 

•  Split  a  motion  tween 

•  Change  the  easing  of  an  object  s  motion 

•  Animate  in  3D  space 


This  lesson  will  take  approximately  2  hours  to  complete.  If  needed, 
remove  the  previous  lesson  folder  from  your  hard  drive  and  copy 
the  Lesson04  folder  onto  it.  Download  the  project  files  for  this 
lesson  from  the  Lesson  &  Update  Files  tab  on  your  Account  page  at 
www.peachpit.com  and  store  them  on  your  computer  in  a  convenient 
location,  as  described  in  the  Getting  Started  section  of  this  book.  Your 
Account  page  is  also  where  you’ll  find  any  updates  to  the  lessons  or  to 
the  lesson  files.  Look  on  the  Lesson  &  Update  Files  tab  to  access  the 
most  current  content. 
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Use  Flash  Professional  to  change  almost  any  aspect 
of  an  object — position,  color,  transparency,  size, 
rotation,  and  more — over  time.  Motion  tweening 
is  the  basic  technique  of  creating  animation  with 
symbol  instances. 


Getting  Started 


Note:  If  you 

have  not  already 
downloaded  the  project 
files  for  this  lesson  to 
your  computer  from 
your  Account  page, 
make  sure  to  do  so  now. 
See  Getting  Started 
at  the  beginning  of 
the  book. 


Start  by  viewing  the  finished  movie  file  to  see  the  animated  title  page  that  you  11 
create  in  this  lesson. 

1  Double-click  the  04End.html  file  in  the  Lesson04/04End  folder  to  play  the 
animation  in  a  browser. 


The  project  is  an  animated  splash  page  for  an  imaginary  soon-to-be-released 
motion  picture.  In  this  lesson,  you  11  use  motion  tweens  to  animate  several 
components  on  the  page:  the  cityscape,  the  main  actors,  several  old-fashioned 
cars,  and  the  main  title. 

2  Close  the  04End.html  file. 

3  Double-click  the  04Start.fla  file  in  the  Lesson04/04Start  folder  to  open  the  initial 
project  file  in  Flash.  This  file  is  an  ActionScript  3.0  document  that  is  partially 
completed  and  already  contains  many  of  the  graphic  elements  imported  into  the 
Library  for  you  to  use. 

4  From  the  view  options  above  the  Stage,  choose  Fit  in  Window,  or  View  > 
Magnification  >  Fit  in  Window,  so  that  you  can  see  the  entire  Stage  on  your 
computer  screen. 

5  Choose  File  >  Save  As.  Name  the  file  04_workingcopy.fla,  and  save  it  in  the 
04Start  folder. 

Saving  a  working  copy  ensures  that  the  original  start  file  will  be  available  if  you 
want  to  start  over. 
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About  Animation 

Animation  is  the  movement,  or  change,  of  objects  through  time.  Animation  can  be 
as  simple  as  moving  a  box  across  the  Stage  from  one  frame  to  the  next.  It  can  also 
be  much  more  complex.  As  you  11  see  in  this  lesson,  you  can  animate  many  different 
aspects  of  a  single  object.  You  can  change  an  object  s  position  on  the  Stage,  change 
its  color  or  transparency,  change  its  size  or  rotation,  or  animate  the  special  filters 
that  you  saw  in  the  previous  lesson.  You  also  have  control  over  an  object  s  path  of 
motion,  and  even  its  easing ,  which  is  the  way  an  object  accelerates  or  decelerates. 

In  Flash,  the  basic  workflow  for  animation  goes  like  this:  Select  an  object  on  the 
Stage,  right-cUck/Ctrl-click,  and  choose  Create  Motion  Tween.  Move  the  red  play¬ 
head  to  a  different  point  in  time  and  move  the  object  to  a  new  position  or  change 
one  of  its  properties.  Flash  takes  care  of  the  rest. 

Motion  tweens  create  animation  for  changes  in  position  on  the  Stage  and  for 
changes  in  size,  color,  or  other  attributes.  Motion  tweens  require  you  to  use  a 
symbol  instance.  If  the  object  youve  selected  is  not  a  symbol  instance,  Flash  will 
automatically  ask  to  convert  the  selection  to  a  symbol. 

Flash  also  automatically  separates  motion  tweens  on  their  own  layers,  which  are  called 
Tween  layers.  There  can  be  only  one  motion  tween  per  layer  without  any  other  ele¬ 
ment  in  the  layer.  Tween  layers  allow  you  to  change  various  attributes  of  your  instance 
at  different  key  points  over  time.  For  example,  a  spaceship  could  be  on  the  left  side  of 
the  Stage  at  the  beginning  keyframe  and  at  the  far-right  side  of  the  Stage  at  an  ending 
keyframe,  and  the  resulting  tween  would  make  the  spaceship  fly  across  the  Stage. 

The  term  “tween ’  comes  from  the  world  of  classic  animation.  Senior  animators  would 
be  responsible  for  drawing  the  beginning  and  ending  poses  for  their  characters.  The 
beginning  and  ending  poses  were  the  keyframes  of  the  animation.  Junior  animators 
would  then  come  in  and  draw  the  “in-between”  frames,  or  do  the  “in-betweening .” 
Flence,  “tweening”  refers  to  the  smooth  transitions  between  keyframes. 

Understanding  the  Project  File 

The  04Start.fla  file  contains  a  few  of  the  animated  elements  already  or  partially 
completed.  Each  of  the  six  layers — man,  woman,  Middle_car,  Right_car,  footer,  and 
ground — contains  an  animation.  The  man  and  woman  layers  are  in  a  folder  called 
actors,  and  the  Middle_car  and  Right_car  layers  are  in  a  folder  called  cars. 
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You'll  be  adding  more  layers  to  create  an  animated 
cityscape,  refining  the  animation  of  one  of  the  actors, 
as  well  as  adding  a  third  car  and  a  3D  title.  All  the 
necessary  graphic  elements  have  been  imported  into 
the  Library  panel.  The  Stage  is  set  at  a  generous  1280 
pixels  by  787  pixels,  and  the  Stage  color  is  black.  You 
might  need  to  choose  a  different  view  option  to  see 
the  entire  Stage.  Choose  View  >  Magnification  >  Fit  in 
Window,  or  choose  Fit  in  Window  from  the  view 
options  at  the  upper-right  corner  of  the  Stage,  to  view 
the  Stage  at  a  magnification  percentage  that  fits 
your  screen. 


Fit  in  Window 
Show  Frame 
Show  All 
2596 
5096 
10096 
200% 

400% 

800% 


Animating  Position 


You'll  start  this  project  by  animating  the  cityscape.  It  will  begin  slightly  lower  than 
the  top  edge  of  the  Stage,  and  then  rise  slowly  until  its  top  is  aligned  with  the  top  of 
the  Stage. 

1  Lock  all  the  existing  layers  so  you  don't 
accidentally  modify  them.  Create  a  new 
layer  above  the  footer  layer  and  rename 
it  city. 

2  Drag  the  bitmap  image  called  cityBG.jpg 
from  the  bitmaps  folder  in  the  Library 
panel  to  the  Stage. 
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Properties  Library 
04_workingcopy.fla 
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3  In  the  Properties  inspector,  set  the  value  of  X  to  0  and  the  value  of  Y  to  90. 


Properties  Library 
Bitmap 


Edit... 


Instance  of:  cityBG.jpg 

Swap... 

▼  Position  and  Size 

X:  0.00  Y: 

90 

c6  W:  1280.00  H: 


This  positions  the  cityscape  image  just  slightly  below  the  top  edge  of  the  Stage. 

4  Right-click/Ctrl-click  on  the  cityscape  image  and  choose  Create  Motion  Tween. 
From  the  top  menu,  you  can  also  select  Insert  >  Motion  Tween. 


5  A  dialog  box  appears  warning  you  that  your  selected  object  is  not  a  symbol. 
Motion  tweens  require  symbols.  Flash  asks  if  you  want  to  convert  the  selection 
to  a  symbol  so  it  can  proceed  with  the  motion  tween.  Click  OK. 


! 


The  selected  item  cannot  be  tweened.  You  must  convert  this  to  a  symbol  in 
order  to  tween.  Do  you  want  to  convert  and  create  a  tween? 


Don't  show  again. 


Cancel 


OK 


Flash  automatically  converts  your  selection  to  a  symbol,  and  stores  it  in  your 
Library  panel.  Flash  also  converts  the  current  layer  to  a  Tween  layer  so  you 
can  begin  to  animate  the  instance.  Tween  layers  are  distinguished  by  a  special 
icon  in  front  of  the  layer  name,  and  the  frames  are  tinted  blue.  Tween  layers  are 
reserved  for  motion  tweens,  and  hence,  no  drawing  is  allowed  on  a  Tween  layer. 


P  city 


6  Move  the  red  playhead  to  the  end  of  the  tween  span  at  frame  190. 
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7  Select  the  instance  of  the  cityscape  on  the  Stage,  and  while  holding  down  the 
Shift  key,  move  the  instance  up  the  Stage. 

Holding  down  the  Shift  key  constrains  the  movement  to  right  angles. 

8  For  more  precision,  set  the  value  of  Y  to  0  in  the  Properties  inspector. 

A  small  black  diamond  appears  in  frame  190  at  the  end  of  the  tween  span. 
This  indicates  a  keyframe  at  the  end  of  the  tween. 


Flash  smoothly  interpolates  the  change  in  position  from  frame  1  to  frame  190 
and  represents  that  motion  with  a  motion  path. 


Note:  Hide  all  the 
other  layers  to  isolate 
the  cityscape  and  to 
better  seethe  results 
of  the  motion  tween. 

Note:  Remove  a 
motion  tween  by  right- 
clicking/Ctrl-clicking 
the  motion  tween  on 
theTimeline  or  the 
Stage  and  choosing 
Remove  Tween. 


9  Drag  the  red  playhead  back  and  forth  at  the  top  of  the  Timeline  to  see  the 
smooth  motion.  You  can  also  choose  Control  >  Play  (Enter)  to  make  Flash  play 
the  animation. 

Animating  changes  in  position  is  simple,  because  Flash  automatically  creates 
keyframes  at  the  points  where  you  move  your  instance  to  new  positions.  If  you 
want  to  have  an  object  move  to  many  different  points,  simply  move  the  red 
playhead  to  the  desired  frame,  and  then  move  the  object  to  its  new  position. 
Flash  takes  care  of  the  rest. 
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Using  the  Controller  to  preview  the  animation 

The  Controller  panel  allows  you  to  play,  rewind,  or  go  step-by-step  backward  or 
forward  through  your  Timeline  to  review  your  animation  in  a  controlled  manner. 

Use  the  playback  controls  that  are  integrated  at  the  bottom  of  the  Timeline, 
or  choose  the  playback  commands  from  the  Control  menu. 

1  Click  any  of  the  playback  buttons  on  the  Controller  below  the  Timeline  to  go 
to  the  first  frame,  go  to  the  last  frame,  play,  stop,  or  move  forward  or  backward 
one  frame. 


III  1 

M  41  ►  !►  M 

2  Choose  the  loop  option  at  the  bottom  of  the  Timeline  and  click  the  play  button. 

The  playhead  loops,  allowing  you  to  see  the  animation  over  and  over  for 
careful  analysis. 

3  Move  the  front  or  rear  brackets  on  the  Timeline  to  define  the  range  of  frames 
that  you  want  to  see  looped. 


The  playhead  loops  within  the  bracketed  frames.  Click  the  loop  option  again  to 
turn  it  off. 

Changing  the  Pacing  and  Timing 

You  can  change  the  duration  of  the  entire  tween  span  or  change  the  timing  of  the 
animation  by  clicking  and  dragging  keyframes  on  the  Timeline. 

Changing  the  animation  duration 

If  you  want  the  animation  to  proceed  at  a  slower  pace  (and  thus  take  up  a  much 
longer  period  of  time),  you  need  to  lengthen  the  entire  tween  span  between  the 
beginning  and  end  keyframes.  If  you  want  to  shorten  the  animation,  you  need  to 
decrease  the  tween  span.  Lengthen  or  shorten  a  motion  tween  by  dragging  the  ends 
on  the  Timeline. 
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1  Move  your  mouse  cursor  close  to  the  end  of  the  tween  span  in 
the  city  layer. 

Your  cursor  changes  to  a  double-headed  arrow,  indicating  that 
you  can  lengthen  or  shorten  the  tween  span. 

2  Click  and  drag  the  end  of  the  tween  span  back  toward  frame  60. 

Your  motion  tween  shortens  to  60  frames,  reducing  the  time  it 
takes  the  cityscape  to  move. 


Timeline  Output 
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3  Move  your  mouse  cursor  close  to  the  beginning  of  the  tween  span  (at  frame  1). 


Timeline  Output 
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Note:  If  you  have 
multiple  keyframes 
in  a  tween,  dragging 
out  your  tween  spans 
will  distribute  all  your 
keyframes  uniformly. 
The  timing  of  your 
entire  animation 
remains  the  same;  only 
the  length  changes. 


4  Click  and  drag  the  beginning  of  the  frame  span  forward  to  frame  10. 

Your  motion  tween  begins  at  an  earlier  time,  so  it  now  plays  only  from  frame  10 
to  frame  60. 


Adding  frames 

You'll  want  the  last  keyframe  of  your  motion  tween  to  hold  for  the  remainder  of  the 
animation.  Add  frames  by  Shift-dragging  the  end  of  a  tween  span. 

1  Move  your  mouse  cursor  close  to  the  end  of  the  tween  span. 
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2  Hold  down  the  Shift  key,  and  click  and  drag  the  end  of  the  tween  span  forward 
to  frame  190. 


Note:  You  can  also 
add  individual  frames 
by  choosing  Insert  > 
Timeline  >  Frame  (F5), 
or  remove  individual 
frames  by  choosing 
Edit  >  Timeline  > 
Remove  Frames 
(Shift+F5). 


The  last  keyframe  in  the  motion  tween  remains  at  frame  60,  but  Flash  adds 
frames  to  frame  190. 
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Moving  keyframes 

If  you  want  to  change  the  pacing  of  an  animation,  you  can  select  individual  key- 
frames,  then  click  and  drag  the  keyframes  to  new  positions. 

1  Click  the  keyframe  at  frame  60. 

The  keyframe  at  frame  60  is  selected.  A  tiny  box 
appears  next  to  your  mouse  cursor,  indicating  that  you 
can  move  the  keyframe. 

2  Click  and  drag  the  keyframe  to  frame  40. 

The  last  keyframe  in  the  motion  tween  moves  to  frame 
40,  so  the  motion  of  the  cityscape  proceeds  quicker. 
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Span-Based  vs.  Frame-Based 
Selections 


By  default,  Flash  does  not  use  span-based 
selection,  which  means  you  can  select  individual 
keyframes  within  a  motion  tween.  However,  if 
you  prefer  to  click  on  a  motion  tween  and  have 
the  entire  span  (the  beginning  and  end  key- 
frames,  and  all  the  frames  in  between)  be 
selected,  you  can  enable  Span  Based  Selection 
from  the  Options  menu  on  the  upper-right 
corner  of  the  Timeline  (or  you  can  Shift-click  to 
select  the  entire  span). 

With  Span  Based  Selection  enabled,  you  can  click  anywhere  within  the  motion 
tween  to  select  it,  and  move  the  whole  animation  backward  or  forward  along  the 
Timeline  as  a  single  unit. 

If  you  want  to  select  individual  keyframes  while  Span  Based  Selection  is  enabled, 
hold  down  the  Command/Ctrl  key  and  click  a  keyframe. 


Tiny 
Small 
V  Normal 
Medium 
Large 
Preview 

Preview  in  Context 
Short 


Animating  Transparency 

In  the  previous  lesson,  you  learned  how  to  change  the  color  effect  of  any  symbol 
instance  to  change  the  transparency,  tint,  or  brightness.  You  can  change  the  color 
effect  of  an  instance  in  one  keyframe  and  change  the  value  of  the  color  effect  in 
another  keyframe,  and  Flash  will  automatically  display  a  smooth  change,  just  as  it 
does  with  changes  in  position. 

YouTl  change  the  cityscape  in  the  beginning  keyframe  to  be  totally  transparent 
but  keep  the  cityscape  in  the  ending  keyframe  opaque.  Flash  will  create  a  smooth 
fade-in  effect. 

1  Move  the  red  playhead  to  the  first  keyframe  of  the  motion  tween  (frame  10). 
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2  Select  the  cityscape  instance  on  the  Stage. 

3  In  the  Properties  inspector,  choose  the  Alpha  option  for  Color  Effect. 


4  Set  the  Alpha  value  to  0%. 


▼  Color  Effect 

Style:  Alpha 

▼ 

Alpha: 

▼  Display 

Visible 

The  cityscape  instance  on  the  Stage  becomes  totally  transparent. 


5  Move  the  red  playhead  to  the  last  keyframe  of  the  motion  tween  (frame  40). 


6  Select  the  cityscape  instance  on  the  Stage. 
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7  In  the  Properties  inspector,  under  Color  Effect,  set  the  Alpha  value  to  100%. 


The  cityscape  instance  on  the  Stage  becomes  totally  opaque. 


8  Preview  the  effect  by  choosing  Control  >  Play  (Enter). 

Flash  interpolates  the  changes  in  both  position  and  transparency  between  the 
two  keyframes. 

Animating  Filters 

Filters,  which  give  instances  special  effects  such  as  blurs  and  drop  shadows,  can 
also  be  animated.  Youll  refine  the  motion  tween  of  the  actors  next  by  apply¬ 
ing  a  blur  filter  to  one  of  them  to  make  it  appear  as  if  the  camera  changes  focus. 
Animating  filters  is  no  different  from  animating  changes  in  position  or  changes  in 
color  effect.  You  simply  set  the  values  for  a  filter  at  one  keyframe  and  set  different 
values  for  the  filter  at  another  keyframe,  and  Flash  creates  a  smooth  transition. 

1  Make  the  actors  layer  folder  on  the  Timeline  visible. 

2  Fock  all  the  layers  on  the  Timeline  except  the  woman  layer. 
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3  Move  the  red  playhead  to  the  beginning  keyframe  of  the  motion  tween  in  the 
woman  layer — at  frame  23. 
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4  Select  the  instance  of  the  woman  on  the  Stage.  You  wont  be  able  to  see  her 
because  she  has  an  alpha  value  of  0%  (totally  transparent).  Click  on  the  upper- 
right  side  of  the  Stage  to  select  the  transparent  instance. 


5  In  the  Properties  inspector,  expand  the  Filters  section. 

6  Click  the  Add  filter  button  at  the  top  of  the  Filters  section  and  select  Blur. 


Flash  applies  the  Blur  filter  to  the  instance. 


►  Accessibility 

▼ 

Filters 

4 

.  v  “ 

Drop  Shadow 

Value 

Glow 

Bevel 

Gradient  Glow 

Gradient  Bevel 

Adjust  Color 

7  In  the  Filters  section  of  the  Properties  inspector,  make  sure  that  the  link  icons 
are  intact  to  constrain  the  blur  values  to  both  the  x  and  y  directions  equally. 
Set  the  X  and  Y  Blur  values  to  20  pixels. 


▼  Filters 

+▼  - 

Property 

Value 

▼  Blur 

O 

Blur  X 

■jco 

Blur  Y 

20  px 

60 

Quality 

Low 
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8  Move  the  red  playhead  across  the  entire  Timeline  to  preview  the  animation. 

The  20-pixel  Blur  filter  is  applied  to  the  woman  instance  throughout  the 
motion  tween. 


9  Right-click/Ctrl-click  on  the  woman  layer  at  frame  140,  and  choose  Insert 
Keyframe  >  Filter. 


135 


Remove  Motion 
3D  Tween 

Convert  to  Frame-by-Frame  Animation 
Save  as  Motion  Preset... 

Insert  Frame 


Remove  Frames 


Insert  Keyframe 


Insert  Blank  Keyframe 

Clear  Keyframe  ► 

View  Keyframes  ► 


Cut  Frames 
Copy  Frames 
Paste  Frames 

Clear  Frames 
Select  All  Frames 


180  185 


Position 

Scale 

Skew 


Rotation 

Color 


Flash  establishes  a  keyframe  for  filters  at  frame  140. 

10  Move  the  red  playhead  to  frame  160,  and  right-click/Ctrl-click  on  the  woman 
layer  and  choose  Insert  Keyframe  >  Filter. 

Flash  establishes  another  keyframe  for  filters  at  frame  160. 


1 1  Select  the  instance  of  the  woman  on  the  Stage  at  frame  160. 

12  In  the  Properties  inspector,  change  the  value  of  the  Blur  filter  to  X=0  and  Y=0. 

The  Blur  filter  changes  from  the  keyframe  at  frame  140  to  the  keyframe  at  160. 
Flash  creates  a  smooth  transition  from  a  blurry  instance  to  an  in-focus  instance. 
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Understanding  Property  Keyframes 


Changes  in  properties  are  independent  of  one  another  and  do  not  need  to  be  tied 
to  the  same  keyframes.  That  is,  you  can  have  a  keyframe  for  position,  a  different 
keyframe  for  the  color  effect,  and  yet  another  keyframe  for  a  filter.  Managing  many 
different  kinds  of  keyframes  can  become  overwhelming,  especially  if  you  want  dif¬ 
ferent  properties  to  change  at  different  times  during  the  motion  tween.  Fortunately, 
Flash  Professional  provides  a  few  helpful  tools  for  keyframe  management. 


When  viewing  the  tween  span, 
you  can  choose  to  view  the 
keyframes  of  only  certain 
properties.  For  example,  you  can 
choose  to  view  only  the  Position 
keyframes  to  see  when  your 
object  moves.  Or,  you  can  choose 
to  view  only  the  Filter  keyframes 
to  see  when  a  filter  changes. 
Right-click/Ctrl-click  on  a  motion 


Insert  Keyframe 

Insert  Blank  Keyframe 

Clear  Keyframe 


View  Keyframes 


Cut  Frames 
Copy  Frames 

Paste  Frames 

Clear  Frames 
Select  All  Frames 

Copy  Motion 

Paste  Motion 


► 

►  | 

J|  V  Position 
>/  Scale 

✓  Skew 

✓  Rotation 

✓  Color 
>/  Filter 

All 

None 


tween  in  the  Timeline,  choose  View  Keyframes,  and  then  select  the  desired  property 


among  the  list.  You  can  also  choose  All  or  None  to  see  all  the  properties  or  none  of 


the  properties. 


When  inserting  a  keyframe,  you  can  also  insert  a  keyframe  specific  to  the  property 
you  want  to  change.  Right-click/Ctrl-click  on  a  motion  tween  in  the  Timeline,  choose 
Insert  Keyframes,  and  then  select  the  desired  property. 

You  can  also  view  an  advanced  panel,  called  the  Motion  Editor,  to  see  and  edit  how 
the  different  properties  of  your  object  change  over  the  course  of  the  motion  tween. 
You'll  learn  more  about  the  Motion  Editor  in  the  next  lesson. 
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Animating  Transformations 


Now  youTl  learn  how  to  animate  changes  in  scale  or  rotation.  These  kinds  of 
changes  are  made  with  the  Free  Transform  tool  or  with  the  Transform  panel. 
YouTl  add  a  third  car  to  the  project.  The  car  will  start  small,  and  then  become 
larger  as  it  appears  to  move  forward  toward  the  viewer. 


1  Lock  all  the  layers  on  the  Timeline. 

2  Insert  a  new  layer  inside  the  cars  folder  and  rename  it  Left_car. 


3  Select  frame  75  and  insert  a  new  keyframe  (F6). 


4  Drag  the  movie  clip  symbol  called  carLeft  from  the  Library  panel  to  the  Stage  at 
frame  75. 

5  Select  the  Free  Transform  tool. 

The  transformation  handles  appear  around  the  instance  on  the  Stage. 
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6  While  holding  down  the  Shift  key,  click  and  drag  a  corner  handle  inward 
to  make  the  car  smaller. 

7  In  the  Properties  inspector,  make  sure  that  the  width  of  the  car  is  about 
400  pixels. 

8  Alternatively,  you  can  use  the  Transform  panel  (Window  >  Transform) 
and  change  the  scale  of  the  car  to  about  29.4%. 

9  Move  the  car  to  its  starting  position  at  about  X=710  and  Y=488. 


10 

11 

12 


In  the  Properties  inspector,  select  Alpha  for  the  Color  Effect. 
Set  the  value  of  the  Alpha  to  0%. 

The  car  becomes  totally  transparent. 


▼  Color  Effect 


Style:  Alpha 


Right-click/Ctrl-click  the  car  on  the  Stage  and 
select  Create  Motion  Tween. 


Alpha: 

Display 


Visible 


□ 

□ 

□ 

Create  Motion  Tween 

* 

□ 

• f|  Cut 

3€X 

HHHH  C  c  V 

3€C 

□ 

The  current  layer  becomes  a  Tween  layer. 
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13  Move  the  red  playhead  on  the  Timeline  to  frame  100. 


14  Select  the  transparent  instance  of  the  car  on  the  Stage,  and  in  the  Properties 
inspector,  change  the  Alpha  value  to  100%. 


▼  Color  Effect 

Style:  Alpha 

▼ 

Alpha: 

▼  Display 

Visible 

Note:  Hold  down 
the  Option/Alt  key 
while  you  drag  the 
corner  handle  of  the 
Transformation  tool 
to  change  the  scale 
relative  to  the  opposite 
corner  point. 


A  new  keyframe  is  automatically  inserted  at  frame  100  to  indicate  the  change 
in  transparency. 

1 5  Select  the  Free  Transform  tool. 

1 6  While  holding  down  the  Shift  key,  click  and  drag  a  corner  handle  outward  to 
make  the  car  larger.  For  more  precision,  use  the  Properties  inspector  and  set  the 
dimensions  of  the  car  to  widths  1380  pixels  and  height=445.05  pixels. 

17  Position  the  car  at  X=607  and  Y=545. 


1 8  Move  the  Left_car  layer  in  between  the  Middle_car  and  Right_car  layers  so  that 
the  car  in  the  center  overlaps  the  cars  on  the  side. 

Flash  tweens  the  change  in  position  and  the  change  in  scale  from  frame 

75  to  frame  100.  Flash  also  tweens  the  change  in  transparency  from  frame  75  to 

frame  100. 
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Timeline  Output 
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Motion  Presets 


If  your  project  involves  creating  identical  motion  tweens  repeatedly,  Flash  provides 
a  panel  called  Motion  Presets  that  can  help.  The  Motion  Presets  panel  (Window  > 
Motion  Presets)  can  store  any  motion  tween  so  you  can  apply  it  to  different 
instances  on  the  Stage. 


For  example,  if  you  want  to  build  a  slide 
show  where  each  image  fades  out  in  the 
same  manner,  you  can  save  that  transi¬ 
tion  to  the  Motion  Presets  panel. 

1  Select  the  first  motion  tween  on  the 
Timeline  or  the  instance  on  the  Stage. 

2  In  the  Motion  Presets  panel, 
click  the  Save  selection  as  preset 
button  at  the  bottom  of  the  panel. 
Alternatively,  right-click/Ctrl-click  on 
the  motion  tween  and  choose  Save  as 
Motion  Preset. 

3  Name  your  motion  preset,  and  it  will 
be  saved  in  the  Motion  Presets  panel. 


Motion  Presets 


►►  -= 


▼  W  Default  Presets 


.°q  bounce-in-3D 
/jj  bounce-out-3D 
.°g  bounce-smoosh 
/a  fly-in-blur-bottom 


/a  fly-in-blur-left 
.°a  fly-in-blur-right 


?■  to  v 

Apply 

_ 

4  Select  a  new  instance  on  the  Stage  and  choose  the  motion  preset. 

5  Click  Apply,  and  Flash  will  apply  your  saved  motion  preset  to  the  new  instance. 


Flash  provides  a  number  of  motion  presets  that  you  can  use  to  quickly  build  sophis¬ 
ticated  animations  without  much  effort. 
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Changing  the  Path  of  the  Motion 


The  motion  tween  of  the  left  car  that 
you  just  animated  shows  a  colored 
line  with  dots  indicating  the  path  of 
the  motion.  You  can  edit  the  path  of 
the  motion  easily  to  make  the  car 
travel  in  a  curve,  or  you  can  move, 
scale,  or  rotate  the  path  just  like  any 
other  object  on  the  Stage. 

To  better  demonstrate  how  you  can 
edit  the  path  of  the  motion,  open 
the  sample  file  04MotionPath.fla  in 
the  Lesson04/04Start  folder.  The  file 
contains  a  single  Tween  layer  with  a 
rocket  ship  moving  from  the  top  left 
of  the  Stage  toward  the  bottom  right. 


Moving  the  path  of  the  motion 

You  will  move  the  path  of  the  motion  so  the  relative  movement  of  the  rocket  ship 
remains  the  same,  but  its  starting  and  ending  positions  change. 

1  Choose  the  Selection  tool. 

2  Click  on  the  path  of  the  motion  to  select  it. 

The  path  of  the  motion  becomes  highlighted. 

3  Click  and  drag  the  motion  path  to  move  it  to  a 
different  place  on  the  Stage. 

The  relative  motion  and  timing  of  the  animation 
remain  the  same,  but  the  starting  and  ending 
positions  are  relocated. 
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Changing  the  scale  or  rotation  of  the  path 

You  can  also  manipulate  the  path  of  the  object  s  motion  using  the  Free 
Transform  tool. 

1  Select  the  path  of  the  motion. 

2  Choose  the  Free  Transform  tool. 

Transformation  handles  appear  around  the  path  of  the  motion. 


3  Scale  or  rotate  the  path  of  the  motion  as  desired.  You  can  make  the  path  smaller 
or  larger,  or  rotate  the  path  so  the  rocket  ship  starts  from  the  bottom  left  of  the 
Stage  and  ends  at  the  top  right. 
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Editing  the  path  of  the  motion 

Making  your  objects  travel  on  a  curved  path  is  a  simple  matter.  You  can  either  edit 
the  path  with  Bezier  precision  using  anchor  point  handles,  or  you  can  edit  the  path 
in  a  more  intuitive  manner  with  the  Selection  tool. 


1  Choose  the  Convert  Anchor  Point  tool,  which  is 
hidden  under  the  Pen  tool. 

2  Click  the  starting  point  or  the  ending  point  of  the 
motion  path  on  the  Stage  and  drag  the  control 
handle  out  from  the  anchor  point. 


■  Pen  Tool  (P) 

Add  Anchor  Point  Tool  (-) 

Delete  Anchor  Point  Tool  (-) 
b-  Convert  Anchor  Point  Tool  (Q  N 


The  handle  on  the  anchor  point  controls  the  curvature  of  the  path. 

3  Choose  the  Subselection  tool. 

Note:  You  can  also  4  Click  and  drag  the  handle  to  edit  the  curve  of  the  path.  Make  the  rocket  ship 

directly  manipulate  travel  in  a  wide  curve, 

the  path  of  the  motion 

with  the  Selection  tool. 

Choose  the  Selection 
tool  and  move  it  close 
to  the  path  of  the 
motion.  A  curved  icon 
appears  next  to  your 
cursor,  indicating  that 
you  can  edit  the  path. 

Click  and  drag  the  path 
of  the  motion  to  change 
its  curvature. 


Orienting  objects  to  the  path 

Sometimes  the  orientation  of  the  object  traveling  along  the  path  is  important. 

In  the  motion  picture  splash  page  project,  the  orientation  of  the  car  is  constant 
as  it  rumbles  forward.  However,  in  the  rocket  ship  example,  the  rocket  ship 
should  follow  the  path  with  its  nose  pointed  in  the  direction  in  which  it  is  heading. 
The  Orient  to  path  option  in  the  Properties  inspector  gives  you  this  option. 
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1  Select  the  motion  tween  on  the  Timeline. 

2  In  the  Properties  inspector,  under  Rotation,  select  the  Orient  to  path  option. 


▼  Rotation 

Rotate:  Otime(s)  +  0  * 

Direction:  none 


▼  Path 


Flash  inserts  keyframes  for  rotation  along  the  motion  tween  to  orient  the  nose 
of  the  rocket  ship  to  the  path  of  the  motion. 


Note:  To  direct  the 
nose  of  the  rocket  ship, 
or  any  other  object, 
along  the  path  of  its 
motion,  you  must 
orient  its  position  so 
that  it  is  facing  in  the 
direction  that  you  want 
it  to  travel.  Use  the 
Free  Transform  tool  to 
rotate  its  initial  position 
so  that  it  is  oriented 
correctly. 


Swapping  Tween  Targets 

The  motion  tween  model  in  Flash  Professional  is  object-based.  This  means  that  an 
object  and  its  motion  are  independent  of  each  other,  and  you  can  easily  swap  out  the 
target  of  a  motion  tween.  If,  for  example,  you’d  rather  see  an  alien  moving  around  the 
Stage  instead  of  a  rocket  ship,  you  can  replace  the  target  of  the  motion  tween  with  an 
alien  symbol  from  your  Library  panel  and  still  preserve  the  animation. 

1  Drag  the  movie  clip  symbol  of  the  alien  from  the  Library  panel  onto  the 
rocket  ship. 
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2  Flash  asks  if  you  want  to  replace  the  existing  tween  target  object  with  a 
new  object. 


Do  you  wish  to  replace  the  existing  tween  target  object? 
Don't  show  again. 


Cancel 


OK 


3  Click  OK. 

Flash  replaces  the  rocket  ship  with  the  alien.  The  motion  remains  the  same, 
but  the  target  of  the  motion  tween  has  changed. 


Note:  You  can  also  swap  instances  in  the  Properties 
inspector.  Select  the  object  that  you  want  to  swap  on  the 
Stage.  In  the  Properties  inspector,  click  the  Swap  button.  In 
the  dialog  box  that  appears,  choose  a  new  symbol  and  click 
OK.  Flash  will  swap  the  target  of  the  motion  tween. 


Properties  Library 


(Instance  Name> 


£ 

Movie  Clip 


Instance  of:  alien 

([  ) 

) 

V> - - Jj 

1 

▼  Position  and  Size 

Creating  Nested  Animations 

Often,  an  object  that  is  animated  on  the  Stage  will  have  its  own  animation.  For 
example,  a  butterfly  moving  across  the  Stage  will  have  an  animation  of  its  wings 
flapping  as  it  moves.  Or  the  alien  that  you  swapped  with  the  rocket  ship  could  be 
waving  his  arms.  These  kinds  of  animations  are  called  nested  animations ,  because 
they  are  contained  inside  the  movie  clip  symbols.  Movie  clip  symbols  have  their 
own  Timeline  that  is  independent  of  the  main  Timeline. 

In  this  example,  you'll  make  the  alien  wave  his  arms  inside  the  movie  clip  symbol, 
so  he'll  be  waving  as  he  moves  across  the  Stage. 
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Creating  animations  inside  movie  clip  symbols 

1  In  the  Library  panel,  double-click  the  alien  movie  clip  symbol  icon. 

You  are  now  in  symbol-editing  mode  for  the  alien  movie  clip  symbol.  The  alien 
appears  in  the  middle  of  the  Stage.  In  the  Timeline,  the  parts  of  the  alien  are 
separated  in  layers. 


2  Choose  the  Selection  tool. 

3  Right-click/Ctrl-click  the  aliens  left  arm  and  choose  Create  Motion  Tween. 


Create  Motion  Tween 

Create  Shape  Tween 

Cut 

Copy 

3€C 

Paste  in  Center 

SSV 

Copy  Motion 

Paste  Motion 

Paste  Motion  Special... 

Flash  converts  the  current  layer  to  a  Tween  layer  and  inserts  1  second  s  worth  of 
frames  so  you  can  begin  to  animate  the  instance. 


Timeline  Output 

o  a 

1  5  10  15  20  25 

!■  feet  1 

H  head  1 

■|  body  1 

JP  arml  /  •  • 

■Q  arm  2 
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4  Choose  the  Free  Transform  tool. 

5  Drag  the  corner  rotation  control  point  near  the  hand  to 
rotate  the  arm  upward  to  the  aliens  shoulder  height. 

Flash  inserts  a  keyframe  at  the  end  of  the  motion  tween. 

The  left  arm  rotates  smoothly  from  the  resting  position  to 
the  outstretched  position. 

6  Move  the  red  playhead  back  to  frame  1. 

7  Now  create  a  motion  tween  for  the  aliens  other  arm.  Right-click/Ctrl-click  his 
right  arm  and  choose  Create  Motion  Tween. 

Flash  converts  the  current  layer  to  a  Tween  layer  and  inserts  1  second  s  worth  of 
frames  so  you  can  begin  to  animate  the  instance. 

8  Choose  the  Free  Transform  tool. 

9  Drag  the  corner  rotation  control  point  near  the  hand  to 
rotate  the  arm  upward  to  the  aliens  shoulder  height. 

Flash  inserts  a  keyframe  at  the  end  of  the  motion 
tween.  The  arm  rotates  smoothly  from  the  resting 
position  to  the  outstretched  position. 

10  Select  the  last  frame  in  all  the  other  layers  and  insert  frames  (F5)  so  that  the 
head,  body,  and  feet  all  remain  on  the  Stage  for  the  same  amount  of  time  as  the 
moving  arms. 


1 1  Click  the  Scene  1  button  in  the  Edit  bar  at  the  top  of  the  Stage  to  exit  symbol- 
editing  mode. 

Your  animation  of  the  alien  raising  his  arms  is  complete.  Wherever  you  use  the 
movie  clip  symbol,  the  aliens  nested  animation  will  continue  to  play. 
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1 2  Preview  the  animation  by  choosing  Control  >  Test. 

Flash  opens  a  window  showing  the  exported  animation.  The  alien  moves  along 
the  motion  path  while  the  nested  animation  of  his  arms  moving  plays  and  loops. 


Easing 


Note:  Animations 
inside  of  movie  clip 
symbols  won't  play 
on  the  main  Timeline. 
Choose  Control  >  Test 
to  preview  nested 
animations. 

Note:  Animations 
inside  movie  clip 
symbols  will  loop 
automatically.  To 
prevent  the  looping, 
you  need  to  add  code 
to  tell  the  movie  clip 
Timeline  to  stop  on  its 
last  frame.  You'll  learn 
to  control  the  Timeline 
with  ActionScript  or 
JavaScript  in  later 
lessons. 


Easing  refers  to  the  way  in  which  a  motion  tween  proceeds.  You  can  think  of  easing 
as  acceleration  or  deceleration.  An  object  that  moves  from  one  side  of  the  Stage 
to  the  other  side  can  start  off  slowly,  then  build  up  speed,  and  then  stop  suddenly. 
Or,  the  object  can  start  off  quickly,  and  then  gradually  slow  to  a  halt.  Your  key- 
frames  indicate  the  beginning  and  end  points  of  the  motion,  but  the  easing  deter¬ 
mines  how  your  object  gets  from  one  keyframe  to  the  next. 

A  simple  way  to  apply  easing  to  a  motion  tween  is  from  the  Properties  inspector. 
Easing  values  range  from  -100  to  100.  A  negative  value  creates  a  more  gradual 
change  from  the  starting  position  (known  as  an  ease-in).  A  positive  value  creates  a 
gradual  slowdown  (known  as  an  ease-out). 

A  more  advanced  way  of  applying  easing  is  to  use  the  new  Motion  Editor,  which 
you’ll  learn  about  in  the  next  lesson. 


Splitting  a  motion  tween 

Easing  affects  the  entire  span  of  a  motion  tween.  If  you  want  the  easing  to  affect 
only  frames  between  keyframes  of  a  longer  motion  tween,  you  should  split  the 
motion  tween.  For  example,  return  to  the  04_workingcopy.fla  file  of  the  cinematic 
animation.  The  motion  tween  of  the  car  in  the  Left_car  layer  begins  at  frame  75  and 
ends  at  frame  190,  at  the  very  end  of  the  Timeline.  However,  the  actual  movement 
of  the  car  starts  at  frame  75  and  ends  at  frame  100.  Youll  split  the  motion  tween  so 
you  can  apply  an  ease  to  the  tween  just  from  frames  75  to  100. 
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1 


In  the  Left_car  layer,  select  frame  101,  which  is  the  frame  just  after  the  second 
keyframe  where  the  car  ends  its  movement. 


2  Right-click/Ctrl-click  on  frame  101  and  choose  Split  Motion. 


Flash  cuts  the  motion  tween  into  two  separate  tween  spans.  The  end  of  the  first 
tween  is  identical  to  the  beginning  of  the  second  tween. 

Motion  tween  split 


3  In  the  Middle_car  layer,  select  frame  94,  right-click/Ctrl-click,  and  choose 
Split  Motion. 

Flash  cuts  the  motion  tween  into  two  separate  tween  spans. 

4  In  the  Right_car  layer,  select  frame  107,  right-click/Ctrl-click,  and  choose 
Split  Motion. 

Flash  cuts  the  motion  tween  into  two  separate  tween  spans.  The  motion  tweens 
of  all  three  cars  are  split. 
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Setting  eases  of  a  motion  tween 

You  11  apply  an  ease-in  to  the  motion  tweens  of  the  approaching  cars  to  give  them 
a  sense  of  weight  and  decelerate  as  real  cars  would. 

1  In  the  Middle_car  layer,  select  any  frame  between  the  first  and  second 
keyframes  of  the  first  motion  tween  (frame  70  to  frame  93). 


Timeline  Output 

o  a  5 

60 

65 

70 

75  8  D 

85 

90  95 

100  105  110 

▼  to  cars 

A  1 

P  Middle_car 

*  •  A  1 

mi 

, _ a 

p  Left_car 

1 

9 

EH 

P  Right_car 

A  1 

eHS 

PH 

►  to  actors 

A  1 

P  city 

A  1  ■ 

P  footer 

A  1 

2  In  the  Properties  inspector,  enter  100  for  the  Ease  value. 


Properties  Library 


Motion  Tween 


Flash  applies  an  ease-out  effect  to  the  motion  tween. 

3  In  the  Left_car  layer,  select  any  frame  between  the  first  and  second  keyframes 
of  the  first  motion  tween  (frame  75  to  frame  100). 


Timeline  Output 

On  5  6_0_  65  70  75  80  85_  90  95  100  105  110 

▼  to  cars  A 

P  Middle_car  A  I 

p  Left_car  f  •  • 

P  Right_car  A 

►  to  actors  A  I 


4  In  the  Properties  inspector,  enter  100  for  the  Ease  value. 

Flash  applies  an  ease-out  effect  to  the  motion  tween. 

5  In  the  Right_car  layer,  select  any  frame  between  the  first  and  second  keyframes 
of  the  first  motion  tween  (frame  78  to  frame  106). 


Timeline  Output 

o  a  5  60  65  70  75  80  85 

90  95  100  105  110 

▼  to  cars  A 

P  Middle_car  A  1 

P  Left_car  1 

F 

p  Right_car  ^  •  A 

EH 

►  to  actors  A  1 

6  In  the  Properties  inspector,  enter  100  for  the  Ease  value. 
Flash  applies  an  ease-out  effect  to  the  motion  tween. 
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7  Enable  the  Loop  Playback  option  at  the  bottom  of  the  Timeline,  and  move  the 
front  and  rear  markers  to  bracket  frames  60  to  115. 


Front  marker 


Back  marker 


Loop  playback 


8  Click  Play  (Return/Enter). 

Flash  plays  the  Timeline  in  a  loop  between  frames  60  and  115  so  you  can 
examine  the  ease-out  motion  of  the  three  cars. 

Frame-by-Frame  Animation 

Frame-by-frame  animation  refers  to  the  illusion  of  movement  created  by  seeing  the 
incremental  changes  between  every  keyframe.  It  s  the  closest  to  traditional  hand- 
drawn  cel  animation,  and  it  s  just  as  tedious.  In  Flash,  you  can  change  a  drawing  in 
every  keyframe,  and  create  a  frame-by-frame  animation. 

Frame-by-frame  animations  increase  your  file  size  rapidly  because  Flash  has  to 
store  the  contents  for  each  keyframe.  Use  frame-by-frame  animation  sparingly. 

In  the  next  section,  you  11  insert  a  frame-by-frame  animation  inside  the  carLeft 
movie  clip  symbol  to  make  it  move  up  and  down  in  a  jittery  fashion.  When  the 
movie  clip  loops,  the  car  will  rumble  slightly  to  simulate  the  idle  of  the  motor. 

Inserting  a  new  keyframe 

The  frame-by-frame  animations  inside  the  carMiddle  and  carRight  movie  clip  sym¬ 
bols  have  already  been  done.  You  11  finish  the  animation  for  the  carLeft  symbol. 

1  In  the  Library  panel,  double-click  the  carRight  movie  clip  symbol  to  examine  its 
completed  frame-by-frame  animation. 

Inside  the  carRight  movie  clip,  three 
keyframes  establish  three  different  positions 
for  the  car  and  its  headlights.  The  keyframes 
are  spaced  unevenly  to  provide  the 
unpredictable  up  and  down  motion. 
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Timeline  Output 


lights 


sm  allRumble 


Ofil5  10 

l  l  i  »  i 


Ll 


I  •  '! 


2  In  the  Library  panel,  double-click  the  carLeft  move  clip  symbol. 
You  enter  symbol-editing  mode  for  the  carLeft  symbol. 


*  04_workingcopy.fla* 

41  £■  Scene  1  ^  carLeft 


Timeline  Output 

o  6  1  5_  10  15  20  25 

IB  lights  M  1 

^  smallRumble  /  •  • 


3  Select  frame  2  in  both  the  lights  layer  and  the  smallRumble  layer. 


Timeline  Output 

©  a  l  5 

■1  lights 

U  smallRumble  /  •  • 

2? 

4  Right-click/Ctrl-click  and  choose  Insert  Keyframe  (F6). 


Timeline  Output 

O  O  1 

■I  lights  l  [ 

^  smallRumble  /  •  • 


Create  Motion  Tween 

Create  Shape  Tween 

Create  Classic  Tween 

Convert  to  Frame-by-Frame  Animation 


Insert  Frame 

Remove  Fran 


Clear  Keyframe 

Convert  to  Keyframes 
Convert  to  Blank  Keyframes 


Flash  inserts  a  keyframe  in  frame  2  of  the  lights  layer  and  the  smallRumble  layer. 
The  contents  of  the  previous  keyframes  are  copied  into  the  new  keyframes. 


Timeline  Output 

O  1 

5 

H  lights  1 

■f  smallRumble  •  • 
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Changing  the  graphics 

In  the  new  keyframe,  change  the  appearance  of  the  contents  to  create  the  animation. 


1  In  frame  2,  select  all  three  graphics  on  Stage  (Edit  >  Select  All,  or  Command/ 
Ctrl+A)  and  move  them  down  the  Stage  1  pixel.  You  can  use  the  Properties 
inspector  or  press  the  Down  Arrow  key  to  nudge  the  graphics  by  1  pixel. 

The  car  and  its  headlights  move  down  slightly. 

2  Next,  repeat  the  process  of  inserting  keyframes  and  changing  the  graphics.  For  a 
random  motion  like  an  idling  car,  at  least  three  keyframes  are  ideal. 


3  Select  frame  4  in  both  the  lights  layer  and  the  smallRumble  layer. 

4  Right-click/Ctrl-click  and  choose  Insert  Keyframe  (F6). 


Flash  inserts  a  keyframe  in  frame  4  of  the  lights 
layer  and  the  smallRumble  layer.  The  contents 
of  the  previous  keyframes  are  copied  into  the 
new  keyframes. 


Timeline  Output 

o  a  i 

5 

II  lights  1  [ 

H  smallRumble  /  •  • 

5  Select  all  three  graphics  on  Stage  (Edit  >  Select  All,  or  Command/Ctrl+A)  and 
move  them  up  the  Stage  2  pixels.  You  can  use  the  Properties  inspector  or  press 
the  Up  Arrow  key  twice  to  nudge  the  graphics  by  2  pixels. 


The  car  and  its  headlights  move  up  slightly. 


6  Test  the  idling  motion  by  enabling  the  Foop  Playback  option  at  the  bottom 
of  the  Timeline  and  click  Play  (Return/Enter). 


Animating  3D  Motion 


Finally,  you  11  add  a  title  and  animate  it  in  3D  space.  Animating  in  3D  presents 
the  added  complication  of  a  third  ( z )  axis.  When  you  choose  the  3D  Rotation  or 
3D  Translation  tool,  you  need  to  be  aware  of  the  Global  Transform  option  at  the 
bottom  of  the  Tools  panel.  The  Global  Transform  option  toggles  between  a  global 
option  (button  depressed)  and  a  local  option  (button  raised).  Moving  an  object 
with  the  global  option  on  makes  the  transformations  relative  to  the  global  coordi¬ 
nate  system,  whereas  moving  an  object  with  the  local  option  on  makes  the  transfor¬ 
mations  relative  to  itself. 


1  Click  on  Scene  1  in  the  Edit  bar  to 
return  to  the  main  Timeline.  Insert  a 
new  layer  at  the  top  of  the  layer  stack 
and  rename  it  title. 

2  Fock  all  the  other  layers. 


Timeline  Output 

o  a 

i 

5 

10 

.15. 

1  n  il  title 

IF  •  • 

▼  w  cars 

A 

P  Middle_car  A  I 

P  Leftjiar 

P  Right_car  A  I 
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3  Insert  a  new  keyframe  at  frame  120. 


►  Bi  actors  Q  I 

P  city  ft  I 

P  footer  A 

P  ground  A  1 


4  Drag  the  movie  clip  symbol  called  movietitle  from  the  Library  panel  onto 
the  Stage. 

The  movietitle  instance  appears  in  your  new  layer  in  the  keyframe  at  frame  120. 

5  Position  the  title  at  x=180  and  y=90. 


Mark  n  Wendy 

SOUSA  CARTER 


Timeline  Output 

II  title 

▼  cars 

P  Middle_car 
P  Left_car 
P  Right_car 
►  |l  actors 

P  city 

P  footer 
P  ground 


6  Right-click/Ctrl-click  on  the  movie  title  and  choose  Create  Motion  Tween. 

Flash  converts  the  current  layer  to  a  Tween  layer  so  you  can  begin  to  animate 
the  instance. 


ADOBE  FLASH  PROFESSIONAL  CC  CLASSROOM  IN  A  BOOK  (2014  RELEASE) 


141 


7  Move  the  red  playhead  to  frame  140. 

8  Select  the  3D  Rotation  tool. 

9  Deselect  the  Global  Transform  option  at  the 
bottom  of  the  Tools  panel. 

1 0  Click  and  drag  the  title  to  rotate  it  around  the 
y-axis  (green)  so  that  its  angle  is  at  about  -50 
degrees.  You  can  check  the  rotation  values  in 
the  Transform  panel  (Window  >  Transform). 


Note:  Animating 
the  3D  rotation 
or  translation  of  a 
symbol  is  currently  not 
supported  in  HTML5 
Canvas  documents  or  in 
WebGL  documents. 


1 1  Move  the  red  playhead  to  the  first  keyframe  at  frame  120. 

12  Click  and  drag  the  title  to  rotate  it  around  the  y-axis  in  the  opposite  direction  so 
that  the  instance  looks  like  just  a  sliver. 


Flash  motion-tweens  the  change  in  the  3D  rotation,  so  the  title  appears  to  swing 
in  three  dimensions. 
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Testing  Your  Movie 


You  can  quickly  preview  your  animation  by  “ scrubbing”  the  red  playhead  back  and 
forth  on  the  Timeline  or  by  choosing  Control  >  Play.  You  can  also  use  the  inte¬ 
grated  Controller  at  the  bottom  of  the  Timeline. 

However,  to  preview  your  animation  as  your  audience  will  see  it  and  to  preview  any 
nested  animations  within  movie  clip  symbols,  you  should  test  your  movie.  Choose 
Control  >  Test. 

Flash  exports  the  published  files — in  this  case,  a  SWF  file — and  saves  it  in  the  same 
location  as  your  FLA  file.  The  SWF  file  is  the  compressed,  final  Flash  media  that 
you  would  embed  in  an  HTML  page  to  play  in  a  browser  with  the  Flash  Player. 

Flash  displays  the  SWF  file  in  a  new  window  with  the  exact  Stage  dimensions  and 
plays  your  animation. 


Note:  The  exported 
SWF  in  Test  Movie  mode 
will  loop  automatically. 
To  prevent  the  looping 
in  Test  Movie  mode, 
choose  Control  > 

Loop  to  deselect  the 
loop  option. 


To  exit  Test  Movie  mode,  click  the  Close  window  button. 

You  can  also  preview  your  animation  by  choosing  Control  >  Test  Movie  >  in 
Browser,  and  Flash  will  export  a  SWF  file  and  open  it  automatically  in  your 
default  browser. 


Note:  If  you've 
targeted  a  different 
publishing  platform 
with  a  different 
document  type  (such 
as  Adobe  AIR),  those 
playback  options  will 
be  available  for  you 
in  the  Control  >Test 
Movie  menu. 
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Generating  PNG  Sequences  and  Sprite  Sheets 


While  you  can  create  sophisticated  animations  to  play  as  a  SWF  file  with  the 
Flash  Player,  you  can  also  use  Flash's  powerful  tools  to  create  your  animation  and 
export  it  as  a  series  of  images  for  use  in  other  environments.  For  example, 
animations  with  HTML5  or  on  mobile  devices  often  rely  on  sequential  PNG  files 
or  a  single  file  that  packs  all  the  images  organized  in  rows  and  columns,  known 
as  a  sprite  sheet. The  sprite  sheet  is  accompanied  by  a  data  file  that  describes  the 
position  of  each  image,  or  sprite,  in  the  file. 

Generating  either  PNG  sequences  or  a  sprite  sheet  of  your  animation  is  easy.  First, 
your  animation  must  be  within  a  movie  clip  symbol.  In  the  Library  panel,  right- 
click/Ctrl-click  the  symbol  and  choose  Export  PNG  Sequence. 

In  the  next  steps,  you  select  the  destination  on  your  hard  drive  for  your  images 
and  the  dimensions  of  your  images. 

For  a  sprite  sheet,  right-click/Ctrl-click  the  symbol  and  choose  Generate  Sprite 
Sheet.  The  Generate  Sprite  Sheet  dialog  box  that  appears  provides  different 
options,  such  as  sizing,  background  color,  and  the  particular  data  format. 


Click  Export  to  output  the  sprite  sheet  and  data  file.  The  data  file  determines 
what  kind  of  development  environment  you'll  use  your  sprite  sheet  in.  For 
example,  JSON,  Starling,  cocos2D,  and  Adobe's  Edge  Animate  are  some  of  the 
data  formats  available. 
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Review  Questions 

1  What  are  two  requirements  of  a  motion  tween? 

2  What  kinds  of  properties  can  a  motion  tween  change  in  an  ActionScript  3.0 
document? 

3  What  are  property  keyframes,  and  why  are  they  important? 

4  How  can  you  edit  the  path  of  an  object  s  motion? 

5  What  does  easing  do  to  a  motion  tween? 

Review  Answers 

1  A  motion  tween  requires  a  symbol  instance  on  the  Stage  and  its  own  layer,  which  is 
called  a  Tween  layer.  No  other  tween  or  drawing  object  can  exist  on  the  Tween  layer. 

2  A  motion  tween  creates  smooth  transitions  between  different  keyframes  of  an  object  s 
location,  scale,  rotation,  transparency,  brightness,  tint,  filter  values,  or  3D  rotation 

or  translation. 

3  A  keyframe  marks  a  change  in  one  or  more  properties  of  an  object.  Keyframes  are 
specific  to  each  property,  so  that  a  motion  tween  can  have  keyframes  for  position  that 
are  different  from  keyframes  for  transparency. 

4  To  edit  the  path  of  an  object  s  motion,  choose  the  Selection  tool  and  click  and  drag 
directly  on  the  path  to  bend  it.  You  can  also  choose  the  Convert  Anchor  Point  tool 
and  Subselection  tool  to  pull  out  handles  at  the  anchor  points.  The  handles  control 
the  curvature  of  the  path. 

5  Easing  changes  the  rate  of  change  in  a  motion  tween.  Without  easing,  a  motion  tween 
proceeds  linearly,  where  the  same  amount  of  change  happens  over  time.  An  ease-in 
makes  an  object  begin  its  animation  slowly,  and  an  ease-out  makes  an  object  end  its 
animation  slowly. 
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NUMBERS 

3D  coordinate  space 
about,  101 

animating  in,  140-142 
changing  object  rotation  in, 
101-102 

editing  3D  rotation  in  HTML5 
Canvas  file,  343-345 
perspective  angle  in,  105-106 
repositioning  object  in,  104 
3D  Rotation  tool,  101-102,  104,  140, 
142,  319 

3D  Translation  tool,  103,  104 
Symbols 
*  (asterisk),  39 
[  ]  (brackets),  222 
,  (comma),  268 

{ }  (curly  brackets),  222,  226,  228 
(curly  quotes),  233 
.  (dot  operator),  222 
//  (comments),  223,  336 
/*  */  (multiline  comments),  223 
( )  (parentheses),  221,  222 

(quotation  marks),  222,  233,  290 
;  (semicolon),  222 

A 

about  this  book,  1 
Action  layer,  236 
Actions  panel 

adding  JavaScript  to,  327,  336 
color-coding  JavaScript  code,  340 
formatting  code  in,  228,  341 
inserting  JavaScript  code  from,  338 
making  multiple  replacements  in, 
241 

using,  223-224 

ActionScript  3.0  code.  See  also 
ActionScript  3.0  documents; 
Code  Snippets  panel 
about,  220-221 

adding  from  Code  Snippets  panel, 
234-236 


attaching  to  keyframes,  224,  247 
code  hints  for,  223 
converting  String  to  Number  data 
in,  268 

creating  your  own  code  snippets, 
236-237 
debugging,  229 
event  listeners  using,  226-227 
Flash  Professional  support  for,  220 
interactivity  using,  209 
making  math  calculations  with, 
266-267 

multiple  replacements  for,  241 
naming  instances,  220 
navigating  to  video  cue  points,  296 
proper  scripting  syntax  for, 

222-223 

referencing  frame  labels  in,  247 
scripting  terminology  for,  221-222 
sharing  snippets,  237-238 
Timeline  navigation  with,  228 
tips  for  writing,  228 
unconverted  in  transfer  to  HTML5 
Canvas,  341 
void  in,  227 

ActionScript  3.0  documents 
about,  11,  12 

conversions  supported  for,  13 
converting  to  HTML5  Canvas,  341 
loops  in,  188 
masks  in,  198 
playing  projector  in,  318 
SWF  files  published  from,  37 
when  and  where  to  add  text  in,  252 
Adobe 

certification  programs  by,  6-7 
forums  and  resources,  5-6,  42 
Adobe  Creative  Cloud,  5 
Adobe  Flash.  See  Flash 
Adobe  Flash  Player.  See  Flash  Player 
Adobe  Flash  Professional  CC.  See  Flash 
Professional  CC 

Adobe  Illustrator.  See  Illustrator 
Adobe  Integrated  Runtime.  See  AIR 


Adobe  Media  Encoder 
adding  files  to,  287-289 
adjusting  video  length,  295-296 
alpha  channels  encoded  with,  303 
changing  queue  status  of,  290 
choosing  target  device  for  encoded 
video,  312-314,  315 
converting  video  files  in,  289-290 
cropping  video,  292-295 
displaying  Export  Settings  dialog 
box,  291-292 
encoding  video  with,  315 
illustrated,  288 

starting  Queue  automatically, 

289,  315 

Adobe  Photoshop,  82-84 

AIFF  file  support,  275 

AIR  (Adobe  Integrated  Runtime). 

See  also  AIR  documents 
creating  applications  with,  348-353 
downloading,  348 
installing  application  for,  353-354 
running  content  with,  319 
Air  Debug  Launcher,  357,  358,  365 
AIR  documents 
about,  11,  12-13 
adding  text  in,  253 
project  files  for  sound/video  lesson, 
273-274 

AIR  for  iOS  Settings  dialog  box,  36, 
362,  363 

AIR  Settings  dialog  box,  349-353 
aligning  objects 

spacing  button  instances,  217-218 
using  Align  panel,  67-68,  73 
alpha  channel  encoding,  303 
Alpha  values 

changing  for  fills,  62-63 
touch  layer,  359 
anchor  points 

adding  or  deleting,  61 
adjusting  stroke  by  dragging,  73 
asymmetric  edits  to,  156 
deleting,  59,  158 
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handles  for,  60 
moving,  157 

using  on  non-linear  paths,  154-155 
Android  devices,  356,  360,  365 
animated  buttons.  See  buttons 
animation,  108-145.  See  also 

converting  animation  to  HTML5 
Canvas 
about,  111 

adjusting  tweening  keyframe 
timing,  184 

animated  buttons,  243-245,  247 
animating  transparency,  118-120 
bounces  using,  170-172 
changes  in  position  using,  112-115 
changing  path  of  motion,  128-131 
converting  from  Flash  to  HTML5 
Canvas,  341-348 

creating  infographic  with,  148-149 
duration  of,  115-116 
exporting  to  HTML5,  333-336 
filters  with,  120-122 
frame-by-frame,  138-140 
looping,  187-189 
modifying  color  of  gradient  fills, 
195-197 

Motion  Editor  for,  149-150 
nested,  132-135 
pacing,  117 
previewing,  115 
shape  tweens  for,  180 
sprite  sheets  of,  144 
stopping,  241-243 
symbols  for,  79 
testing  movie,  143 
3D  spaces,  140-142 
transformations  using,  124-126 
transition,  238-240 
Apple 

publishing  Flash  content  for  iOS, 
356 

publishing  iOS  mobile  apps, 
360-363 

publishing  Macintosh  AIR  desktop 
projector,  355 

testing  published  projects  for  iOS, 
357,  365 
applications 

installing  AIR,  353-354 
playing  with  projectors,  318 
publishing  mobile,  360-363 
simulating  mobile,  357-360,  365 
arguments,  221 
audio.  See  sound 
author- time,  runtime  vs.,  364 
Auto-Recovery  feature,  39-40 


B 

bitmap  art 

converting  vector  to,  69-70,  85 
exporting  movie  clip  symbols  as,  98 
shape  tweens  unavailable  for,  180 
swapping  symbols  with,  215-216 
bitmap  fills,  56 
Blending  options,  97 
blending  shape  tweens,  183 
Blur  filter,  99-100 
bounces 

animating,  163,  170-172 
using  Bounceln  ease  with,  173-175 
brackets  ([  ]),  222 
breaking  apart 
symbols,  90-91 
text,  254 

brightness,  94-95 
broken  shape  tweens,  187 
button  symbols 

about,  79,  80,  209 
creating,  210-213 
displaying  animated  button 
keyframes,  247 
duplicating,  214-215 
invisible,  214 

naming  instances  for,  219-220,  247 
placing  instances  of,  217-218 
starting  interactivity  with,  209 
states  of,  210 

buttons.  See  also  button  symbols 
adding  sounds  to,  285-289 
animating,  243-245,  247 
event  handlers  for,  226 
home,  233,  234 

c 

captive  runtime,  39 
case-sensitivity  of  variables,  221 
characters,  text,  256,  264 
circles,  73 

classic  tweens,  328,  330-332 
clearing  Publish  cache,  319 
click  event  code,  227 
code-signing  certificate,  351,  365 
Code  Snippets  panel 

adding  ActionScript  code  in, 
234-236 

creating  code  for,  236-237 
making  home  button  from,  233-236 
sharing  snippets,  237-238 
stopping  animations  from,  242 
using  HTML5  Canvas  code 
snippets,  336-339,  365 


codecs  (compression-decompression), 
287 

color.  See  also  color-coding 

animating  gradient  fills,  195-197 
blending  instance,  97 
changing  Stage  background,  16 
choosing  light  gray  for  user 
interface,  15 

editing  stroke  and  fill,  51 
hexadecimal  values  of,  47 
matching  existing  object  s,  65-66 
meanings  of  shape  hint,  193 
color-coding 

ActionScript  code,  228 
JavaScript  code,  340 
Color  Effect  option  (Properties 
inspector),  94-96 
color  pointers,  54,  55 
commas  in  numeric  entries,  268 
comments  (II),  223,  336 
Compiler  Errors  panel,  229 
complex  eases,  163-176 
compressing 

sound  files,  283-285 
video  files,  287 

constraints  on  anchor  points,  157 
content 

author-time,  364 
copying/pasting  into  HTML5 
Canvas,  346-348 
inserting  in  keyframes,  229-231 
publishing  for  mobile  devices, 
356-363 

resizing  and  scaling,  38-39 
running  with  AIR,  319 
Controller  panel,  115 
Convert  to  Symbol  command,  80-81 
converting  animation  to  HTML5 
Canvas,  341-348.  See  also 
HTML5  Canvas 
copying/pasting  content  into 
HTML5  Canvas,  346-348 
editing,  343-345 

publishing  image  assets  when,  346 
unconverted  feature  warnings 
when,  342-343 

copying 
layers,  27 
lesson  files,  4,  8 

sample  movies  and  projects,  4-5 
shapes,  49-50 
copying/pasting 

content  into  HTML5  Canvas, 
346-348 
curves,  159-161 
Illustrator  artwork  in  Flash,  78 


ADOBE  FLASH  PROFESSIONAL  CC  CLASSROOM  IN  A  BOOK  (2014  RELEASE)  367 


Create  New  Symbol  dialog  box,  210 
CreateJS  libraries 

about,  327-328,  364,  365 
frame  numbers  for,  340,  365 
referencing  for  published  files,  336 
cropping  video,  292-295 
cue  points,  296 

curly  brackets  ({ }),  222,  226,  228 

curly  quotes  (“  ”),  233 

curves 

adding  with  Pen  tool,  59-61 
copying  and  pasting  curves, 
159-161 

duplicating  motion  tween,  162-163 
editing  X-  and  Y-properties  for, 
152-153 

property  vs.  ease,  169,  177 
cutting  layers,  27 

D 

debugging  ActionScript  code,  229 
declaring  variables,  221 
deleting 

anchor  points,  61,  158 
color  pointers,  55 
property  curves,  158 
sound  files,  283 
vs.  moving  keyframes,  24 
desktop  applications,  348-356 
destination  keyframes 
creating,  229-233 
moving  playhead  to,  238-242 
device  fonts,  265 
digital  signature,  351,  365 
distributing  objects,  67-68 
docking/undocking  panels,  31 
documents.  See  also  ActionScript  3.0 
documents;  AIR  documents 
adding  layers  in,  19-20 
conversions  supported  in  Flash 
Pro,  319 
creating,  1-12 

features  supported  by  types  of,  13 
inserting  paragraph  text,  257-260 
integrating  text  in,  269 
modifying  .xfl,  40-41 
saving,  12 

selecting  for  playback  environment, 
12-13 
SVG,  72 

types  of,  12-13,  318 
when  and  where  to  add  text, 
252-253 


dot  operator  (.),  222 
Down  keyframes,  212-213,  237 
Down  state,  210,  286 
downloading  AIR,  348 
duplicating 

button  symbols,  214-215 
keyframes,  188 
layers,  27 

motion  tween  curves,  162-163 
stop  action  keyframes,  242 
symbols,  88 
dynamic  text 

defined,  253,  269 
selecting,  263 

showing  field  border  for,  264 


easing 

adding  multiple  complex,  170-172 
defined,  111,  135 
Motion  Editor  options  for  tween, 
166-168 

property  curves  vs.  ease  curves, 

169,  177 

rates  of  change,  145 
removing,  169 
setting,  137-138,  177 
shape  tweens,  204 
splitting  motion  tween,  135-136 
using  Bounceln  ease,  173-175 
Edit  Envelope  dialog  box,  279-280,  315 
editing 

curves,  61 
motion  paths,  130 
object  s  motion  paths,  145 
Photoshop  files  in  Flash,  84 
property  curves,  152-153 
shapes,  49-51 
sound  clips,  279-280,  315 
symbols,  87-90,  107 
3D  rotation  in  HTML5  Canvas, 
343-345 

variable-width  strokes,  57-58 
volume  of  sound  files,  281-282 
embedding 

Flash  video,  306-311 
fonts,  264,  265,  268,  269 
encoding  video 

Adobe  Media  Encoder  for,  315 
choosing  target  device  when, 
312-314,  315 
displaying  options  for,  291 
encoding  alpha  channels,  303 
event  handlers,  226 


event  listeners 

adding  code  for,  226-227 
adding  JavaScript,  338 
defined,  247 
events 

defined,  226,  247 
mouse,  227,  336-339 
Export  Settings  dialog  box  (Media 
Encoder) 

advanced  video/audio  options  for, 
292,  297-298 
cue  points  in,  296 
displaying,  291-292 
illustrated,  292 

Export  to  Projector  window,  355 
exporting 

animation  to  HTML5,  333-336 
assets  during  publishing,  346 
graphics  to  SVG,  70-72 
movie  clip  symbols  as  bitmap  art, 
98 

sprite  sheets,  144 
video  from  Flash,  311-312 
external  video,  299 
Eyedropper  tool,  65-66 

F 

fade-in/fade-out  effects,  282,  309-311 
files.  See  also  lesson  files;  and  specific 
files 

adding  to  Media  Encoder,  287-289 
asterisk  in  name  of,  39 
backing  up  automatically,  39 
compressing  sound,  283-285 
configuring  Publish  Settings  for, 
335-336 

elements  in  project,  111-112 
Flash  support  for  sound,  275 
HTML  project  output,  334-335 
importing  Photoshop,  82-84 
MP3,  275 
MP4,  306 
opening,  10 

required  to  play  Flash  movie  in 
browser,  364 

fills 

Alpha  value  of,  62-63 
animating  color  of  gradient, 
195-197 
bitmap,  56 

changing  properties  for,  51 
default,  48 
defined,  46,  53 
editing  spillover  from,  51 
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effect  of  shape  tweens  on,  205 
gradient,  53-55 
morphing  changes  with  shape 
tweens,  180,  205 
sampling,  66 
selecting,  48 
transparent,  62-64 
filters 

animating,  120-122 
applying  Blur,  99-100 
defined,  99 
options  for,  100 
.fla  files 

documents  saved  as,  12 
embedding  on  Timeline,  307-308 
frame  rate  of  FLV  embedded  video 
and,  307 
opening,  10 

published  files  saved  with,  143,  318 
flag  icon,  232 

Flash.  See  also  Flash  Professional  CC 
ActionScript  support  for  versions 
of,  12 

additional  resources  for,  5-6 
converting  Illustrator  layers  to, 
76-79,  107 

creating  document  in,  11-12 
creating  self-signed  certificate, 

351,  365 

detecting  Flash  Player  version, 

323,  364 

drawing  modes  for,  52,  73 
embedding  video  in,  306-307 
further  resources  on,  42 
installing,  3 
new  features  of,  2 
previewing  movies  in,  36-37 
starting,  10 

support  for  graphics  tablets,  59 
testing  projects  on  mobile  devices, 
365 

undoing  steps  in,  35-36,  43 
updating,  42 
uses  for,  1 

workspace  for,  13-17 
writing  scripts  in  Action  panel,  223 
Flash  Player 
about,  318 

detecting  version  of  viewer  s, 

323,  364 

errors  porting  content  to  HTML5, 
342 

publishing,  319-326 
specifying  publish  settings  for, 
320-322 


Flash  Professional  CC 

ActionScript  support  for,  220 
authoring  content  in,  318 
document  conversion  supported 
in,  319 

exporting  animation  as  video,  315 
features  supported  by  HTML5 
Canvas,  334 

Flash  Support  Center,  42,  43 
FLV  files 

embedding  in  Flash,  287 
frame  rate  of  FLA  and,  307 
support  by  Adobe  Media  Encoder 
for,  303 

FLVPlayback  component,  302-303 
folders 

contents  of  Library  and  images,  40 
importing  multiple  sound  files  to 
sound,  276 
layer,  25-26 

organizing  symbols  in,  86 
XFL  documents,  40 
Font  Embedding  dialog  box,  264 
fonts 

device  vs.  embedded,  265 
embedding  text,  264,  269 
substituting  missing,  76 
using  substitute,  208 
Format  Code  option  (Action  panel), 
228,  341 

frame-based  selection  of  keyframes,  118 
frame-by-frame  animation,  138-140 
frames.  See  also  keyframes 

adding  in  motion  tweens,  116-117 
adding  on  Timeline,  21-22,  224- 
225,  278 

adjusting  size  of,  27 
appearance  on  Timeline,  8 
keyframes  vs.,  43 
labeling,  231-233,  247,  365 
loading  URL  in  specific,  261 
selecting  multiple,  22 
shortcuts  for  moving  video,  296 
Free  Transform  tool,  49,  124 
functions 

adding  to  event  handlers,  226-227 
curly  brackets  and,  226,  228 
defined,  221,  226,  247 


getting  started 

about  this  book,  1 
copying  lesson  files,  4 
copying  sample  movies  and 
projects,  4-5 


how  to  use  lessons,  5 
installing  Flash,  3 
new  Flash  features,  2 
prerequisites,  2 
GIF  files,  85 

global  vs.  local  transformations,  104, 140 
Google  Android  devices,  356,  360,  365 
gotoAndPlay()  command,  238,  241,  340 
gotoAndStop()  command,  238,  241,  340 
gradient  fills 
about,  53 

adjusting  features  of,  55 
creating  color  transitions  with, 
53-55 

Gradient  Transform  tool,  55,  56,  196 
graphic  symbols,  79,  80 
graphics,  44-73.  See  also  fills;  strokes 
adjusting  fills  for,  46,  48,  51,  53-56 
adjusting  in  frame-by-frame 
animation,  140 
bitmap  fills  in,  56 
converting  vector  to  bitmap, 

69-70,  85 
curves,  59-61 
drawing  circles,  73 
editing  strokes  in,  48,  51,  57-58, 

59,  73 

exporting  to  SVG,  70-72 
gradient  fills  in,  53-55 
rendering  in  WebGL,  356 
transparencies,  62-64 
using  text  with,  64-67 
working  with  shapes,  46-52 
graphics  tablets,  59 
green  screen,  303 
groups 

creating  object,  56-57 
panel,  31 

shape  tweens  unavailable  for,  180 
guides,  93-94 

H 

handle  bars,  156 
Help  resources,  5,  42 
hexadecimal  values  of  colors,  47 
History  panel,  35-36,  43 
Hit  keyframes,  214 
Hit  state,  210,  285 
home  button,  233-236 
hotspots,  213 

HTML5.  Sec  also  HTML5  Canvas 
classic  tweens  in,  328 
errors  porting  content  from  Flash 
Player,  342 

exporting  animation  to,  333-336 
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HTML5  (< continued ) 

HTML  Wrapper  format,  322, 
323-324 

publishing,  327-328 
HTML5  Canvas 
about,  12,  13,  327 
adding  text  in,  253 
converting  Flash  animations  to, 
341-348 

copying/pasting  content  into, 
346-348 

creating  document  for,  11 
Flash  features  supported  by,  334 
publishing  project  files  in,  329 
understanding  output  files  for, 
334-335 

using  code  snippets  for,  336-339,  365 
using  3D  rotation  in,  319,  343-345 
video  playback  unsupported  for,  287 
writing  JavaScript  code  for,  209 
hyperlinks,  66-67,  260-262,  269 

I 

icons 

flag,  232 

movie  clip  symbol,  79 
symbol,  79 
Illustrator 

copying/pasting  artwork  in  Flash,  78 
importing  files  from,  76-79,  107 
using  with  Flash,  78 
images 

file  formats  supported  by  Flash,  85 
importing  to  Library  panel,  17 
smoothing  bitmap,  30 
using  imported,  18 
images  folder,  40 
Import  Video  wizard 

importing  video  clip  with,  299-302, 
304-306 

selecting  skin  in,  300 
importing 

code  snippets,  238 
Illustrator  files,  76-77 
item  to  Library  panel,  17 
Photoshop  files,  82-84 
sound  files,  275-276 
video  clip  with  Import  Video 
wizard,  299-302,  304-306 
In/Out  point  markers,  296 
Ink  Bottle  tool,  51 
input  text 

creating  display  fields  with,  262-264 
creating  user  input  with,  261-268 


defined,  253,  269 
showing  field  border  for,  264 
installing 

AIR  application,  353-354 
Flash,  3 
instances 

adding  movie  clip,  333 
adjusting  brightness  of,  94-95 
aligning  to  rulers  and  guides,  93-94 
blending  colors  on,  97 
Blur  filter  applied  to,  99-100 
breaking  apart  symbol,  90-91 
changing,  330 
defined,  107 

effect  of  motion  tweens  on,  205 
naming  button,  219-220,  247 
resizing  and  repositioning,  91-93 
shape  tweens  unavailable  for,  180 
showing/hiding  movie  clip,  96-97 
swapping  as  tween  targets,  132 
symbols  vs.,  79 
transparency  of,  95-96,  107 
interactive  navigation,  206-247. 

See  also  ActionScript  3.0  code 
about  interactive  movies,  209 
ActionScript  code  for,  220-224 
adding  new  Timeline  frames, 
224-225 

aligning  button  symbols,  217-218 
animated  button  in  movie  clip 
symbol,  243-245,  247 
button  symbols  for,  80,  210-213 
creating  destination  keyframes, 
229-233 

duplicating  button  symbols, 
214-215 

event  listener  code  in,  226-227 
lesson  files  for,  208-209 
naming  button  instances,  219-220, 
247 

sharing  snippets,  237-238 
stopping  animations  at  specific 
frame,  241-243 
swapping  symbols,  215-216 
transition  animations,  238-240 
transparent  button  instances  and, 
244-245 

using  ActionScript  Timeline 
navigation,  228 

working  with  ActionScript  code 
snippets,  234-236 
invisible  buttons,  214 
iOS  devices.  See  Apple 
iOS  Simulator,  357,  365 
.ipa  files,  361 


JavaScript.  See  also  CreateJS  libraries 
adding  in  projects,  336-339 
controlling  Timeline  with,  339-341 
frame  numbers  beginning  in  Flash 
and  CreateJS  suite,  340,  365 
inserting  in  Flash,  336,  365 
saving  video  file  size  in,  365 
writing  HTML5  Canvas  navigation 
in,  209 

JPEG  files,  85 
.json  files,  356 


keyboard  shortcuts 

adjusting  one  side  of  variable-width 
lines,  59 

constraining  anchor  points  when 
moving,  157 

inserting  frames  with,  21 
making  multiple  stroke  and  fill 
selections,  48 

moving  anchor  points  with,  156 
moving  video  frames,  296 
selecting  multiple  frames  with,  22 
keyframes,  22-24,  43 

added  automatically  when 
animating  position,  114 
adjusting  graphics  in,  140 
attaching  ActionScript  to,  224,  247 
button  appearance  and,  209 
classic  tween  between,  330-332 
content  added  to,  229-231 
creating,  22-24 

displaying  animated  button,  247 
distributing  uniformly  in  tween,  116 
duplicating,  188 
editing  sound  clip  in,  315 
establishing  different  shapes  in, 
181-182 

fixed  broken  shape  tweens,  187 
frames  vs.,  43 
illustrated,  22 
importing  layers  as,  107 
inserting,  138-139,  330 
labeling,  231-233,  247,  365 
moving,  24,  117 
placing  sound  file  on  Timeline, 
277-278 

property,  123,  145 

refining  animation  timing  of,  184 

removing,  24 

shape  hints  added  to,  190-194,  205 
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shape  tweens  between,  182-183, 
184-186,  205 

span-based  vs.  frame-based 
selection  of,  118 

stopping  animations  at  specified, 
241-243 

keywords,  221,  228 


labeling  keyframes,  231-233,  247,  365 
Lasso  tool,  73 
layer  folders,  25-26 
layer  stack,  21 

layers.  See  also  Masked  layers;  masks 
about,  19 

Action  layer  code  snippets,  236 
adding,  19-20 
adding  to  layer  folders,  26 
converting  Illustrator  to  Flash, 
76-79,  107 

cutting,  copying,  pasting,  and 
duplicating,  27 
illustrated,  13 

importing  Illustrator,  76-79,  107 
locking/unlocking,  19,  68 
organizing  in  Timeline,  25-27 
renaming,  19 

Timeline  frames  for,  224-225 
Tween,  111 
working  with,  21 
lesson  files 

animated  infographic,  148-149 
animated  logo,  180,  181 
animating  symbols,  110 
banner  ad,  46 
cartoon  frame,  76 
copying,  4,  8 

creating  simple  animations,  10 
how  to  use,  5 

interactive  navigation,  208-209 
opening,  10 

prerequisites  for  using,  2 
publishing  HTML5  project  files,  329 
using  text,  250-252 
working  with  sound  and  video, 
272-274 
Library  folder,  40 
Library  panel,  17-19 
about,  17 

editing  symbols  in,  87-88,  107 
importing  item  to,  17 
organizing  symbols  in,  86 
original  symbols  stored  in,  75,  79 
sound  files  imported  to,  276 


linear  motion  paths,  153 
lines,  58-59 
locking/unlocking 
guides,  94 
layers,  19,  68 

Loop  Playback  button,  188 
loops 

controls  for  animation,  115 
creating,  188 

inserting  in  movie  clip  symbol, 
189-190 

movie  previews,  37 
previewing,  188-189 

M 

magnification  levels,  159 
Masked  layers 

animating,  200-204 
creating,  199,  205 
using  multiple,  200 
masks.  See  also  Masked  layers 
about,  179,  198,  200 
animating,  200-204 
creating,  198-199,  205 
strokes  unrecognized  in,  198 
using  transparencies  in,  198 
viewing  effects  of,  200,  205 
Merge  Drawing  mode,  52,  73 
methods 

defined,  222 

editing  symbol,  87-90,  107 
used  to  create  symbols,  80-81,  107 
mobile  devices 

changing  video  output  size  to 
match,  295 

choosing  target  device  for  encoded 
video,  312-314,  315 
publishing  Flash  content  for, 
356-363 

publishing  for  iOS,  360-363 
resizing  Stage  and  contents  for, 
38-39 

simulating  mobile  apps,  357-360, 
365 

testing  Flash  projects  on,  365 
using  different  video  formats  for,  291 
mortgage  calculator 

adding  static  text  to,  261-262 
changing  text  box  content  for, 
266-267,  269 
embedding  fonts  for,  264 
features  of,  251 

naming  text  boxes  for,  265-266 


setting  up  display  fields  for, 
262-264 
testing,  268 
Motion  Editor 

about,  147,  149-150 
accessing  motion  tweening  in,  177 
adding  anchor  points  on  non-linear 
paths,  154-155 
adding  ease-in,  166-168 
animating  bounces,  170-172 
changing  curvature  of  path,  156 
copying/pasting  curves,  159-161 
editing  property  curves,  152-153 
moving  anchor  points,  157 
removing  ease,  169 
unavailable  for  shape  tweens,  204 
understanding  property  values  in, 
153 

viewing  options  in,  159 
Motion  Presets  panel,  127,  240 
motion  tweens 

adding,  150-152 
adding  frames  in,  116-117 
applying  to  embedded  video, 
309-311 

classic  tweens  vs.,  328 
defined,  111 

distributing  keyframes  uniformly 
in,  116 

easing  rates  of  change  in,  111,  145 
editing  property  curves,  152-158 
moving  path  of  motion,  128 
presets  for,  127 
removing,  114,  169 
selecting  preset,  240 
shape  tweens  vs.,  205 
splitting,  135-136 
swapping  targets  of,  131-132 
symbols  required  for,  113,  145 
transitions  created  by,  145 
mouse  events 

ActionScript  code  for,  227 
adding  response  to  click,  336-339 
movie  clip  symbols 
about,  79-80 

adding  instance  to  project,  333 
animated  button  in,  243-245,  247 
changing  3D  rotation  of,  101-102 
converting  embedded  video  to, 
309-310 

creating  for  bird  animation,  329 
exporting  as  bitmap  art,  98 
looping  animation  from,  188, 
189-190 

nested  animations  in,  132-135 
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movie  clip  symbols  ( continued ) 

Photoshop  images  converted  into,  84 
showing/hiding,  96-97 
symbol  icon  for,  79 
movies.  See  also  movie  clip  symbols 
changing  playback  settings  for,  326 
copying  sample,  4-5 
outputs  as  AIR  file,  348 
previewing,  36-37 
saving,  39-41 

sizing  and  scaling  for  browsers, 
323-326 

moving 

anchor  points,  157 
keyframes,  24 
motion  paths,  128 
panel  groups,  31 
MP3  files,  275 
MP4  files,  306 

multiline  comments  (/*  */),  223 

N 

naming 

button  instances,  219-220,  247 
code  snippet  instances,  236 
text  box  instances,  269 
text  boxes,  265-266 
variables,  221 
workspaces,  15 
nested  animations,  132-135 
New  Symbol  command,  80 
non-linear  motion  paths,  154-155 
Number  data  in  ActionScript  code,  268 

o 

Object  Drawing  mode,  52,  73 
objects.  See  also  shapes 
ActionScript,  222 
aligning,  67-68,  73 
changing  path  scale  or  rotation 
for,  129 

converting  to  symbol,  113 
editing  motion  paths  of,  145 
effect  of  drawing  modes  on,  52 
grouping,  56-57 
matching  color  of,  65-66 
moving  on  linear  and  non-linear 
paths,  154 

orienting  to  path,  130-131 
positioning  in  3D,  101-103 
swapping  motion  tween  targets  for, 
131-132 

working  with  broken  apart  text,  254 
onion  skin  outlines,  195 


opening 
panels,  31 

Properties  inspector,  28 
XFL  documents,  41 
orienting  objects  to  paths,  130-131 
outlines 

onion  skin,  195 
showing  layer  as,  19 
Oval  tool,  47-48,  73 
Over  keyframes,  216,  237 
Over  state 

adding  sound  to,  286 
defined,  210 

organizing  sounds  for,  285 


P 

pacing  animation,  117 
Paint  Bucket  tool,  51 
panel  groups,  31 
panels.  See  also  specific  panels 
preset  arrangement  of,  14 
working  with,  31 
paragraph  text 

inserting,  257-260 
line  spacing  in,  259 
parentheses  ( ),  221,  222 
Paste  in  Place  command,  62 
Pasteboard,  about,  15 
pasting.  See  also  copying/pasting 
curves,  159-161 
Illustrator  artwork  in  Flash,  78 
layers,  27 
shapes,  49-50 
paths,  128-131 

adjusting  curvature  of,  156 
changing  motion,  128-131 
changing  scale  or  rotation  for,  129 
editing  objects  motion,  145 
moving  motion,  128 
non-linear  motion,  154-155 
orienting  objects  to,  130-131 
pausing  movies,  225 
Pen  tool,  59-60 
Pencil  tool,  57-58 
perspective  angle,  105 
Photoshop,  82-84 
placing  button  symbols,  217-218 
playback  environment.  See  also  Flash 
Player 

changing  movie  playback  settings, 
326 

selecting  documents  for,  12-13 
playhead 

ActionScript  script  moving,  209 
appearance  of,  18 


frame  labels  for  controlling,  238,  340 
moving,  33,  274 
previewing  movie  with,  143 
scrubbing,  23 
PNG  files,  85,  144 
positioning 

animating  changes  in,  112-115 
objects  in  3D,  101-103 
objects  on  Stage,  28-30 
text  on  Stage,  255 
Preferences  dialog  box,  15,  42 
Preset  Browser  (Media  Encoder), 

288,  291 
presets 

Edit  Envelope,  282 
motion  tween,  127 
saving  filter,  100 
previewing 

animation,  115 
loops,  188-189 
movies,  36-37 

Primitive  Drawing  mode,  52,  73 
projectors 

creating,  355-356 
defined,  355 

loading  dependent  assets  with,  356 
playing  stand-alone  applications 
with,  318 

projects 

copying  sample,  4-5 
elements  in  project  files,  111-112 
exporting  animation  for  publishing, 
333-334 

properties  in  ActionScript,  222 
Properties  inspector,  28-30 
applying  easing  in,  135 
changing  stroke  and  fill  color 
with,  51 

deleting  or  changing  sounds  in,  283 
editing  color  effects  in,  94-96 
illustrated,  13 
making  text  selectable,  258 
modifying  shape  tweens  in,  183 
modifying  text  characters  in,  256 
naming  text  box  instances,  269 
opening,  28 

positioning  object  with,  28-30 
positioning  text  on  Stage,  255 
resizing  text  boxes,  258-259 
static  text  properties  added  in, 
259-260 
uses  of,  28 
property  curves 

applying  Bounceln  ease  to,  174 
changing  curvature  of,  156,  177 
deleting,  158 
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different  eases  for  X-  or 

Y-properties,  175-176 
ease  vs.,  169,  177 
editing,  152-153 

Motion  Editor  view  options  for,  159 
property  keyframes,  123,  145 
.psd  files,  82-84,  85 
Publish  Settings  dialog  box 
illustrated,  37 
options  for,  335-336 
Playback  settings  in,  326 
selecting  asset  export  options,  346 
settings  saved  with  document  in,  319 
sound  and  compression  settings 
in,  284 

publishing,  316-365 
about,  318 

adding  JavaScript  in  projects, 
336-339 

clearing  Publish  cache,  319 
desktop  applications,  348-356 
document  types  supported  for,  318 
Flash  content  for  mobile  devices, 
356-363 

Flash  Player,  319-326 
HTMF5  Canvas  files,  327-328,  329 
mobile  apps,  360-363 
projectors,  355-356 
Publish  settings  options,  335-336 
types  of  playback  environments, 
318-319 

using  classic  tweens,  328 
WebGF  animations,  356 


Queue  panel  (Media  Encoder) 
changing  file  status  in,  290 
illustrated,  288 
quotation  marks,  290 
starting  automatically,  289,  315 
QuickTime  for  Windows  users,  287,  312 
quotation  marks  (“  ”),  222,  233,  290 

R 

Rectangle  tool,  47 
removing 

frames,  117 
keyframes,  24 
motion  tween,  114,  158 
renaming  layers,  19 
rendering  vector  art  as  bitmaps,  98 
repositioning 

instances,  91-93 
layers  on  stack,  21 


resetting 

Color  Effect  options,  96 
default  workspace,  14 
transformations,  104-105 
resizing 

content,  38-39 
instances,  91-93 

movies  for  web  browser,  323-326 
Stage  and  contents,  38-39 
text  box,  258-259 
rotating 

animating  rotation  changes, 
124-126 

movie  symbol  clips  in  3D,  101-102 
objects  path,  129 
rulers  and  guides,  93-94 
runtime.  See  also  AIR 
author- time  vs.,  364 

s 

sampling  color,  65-66 
saving 

advanced  audio/video  export 
options,  298 
code  snippets,  237 
documents,  12 
filter  presets,  100 
movies,  39-41 
workspaces,  14-15 
XFL  documents,  40 
scaling 

animating  scale  changes,  124-126 
changing  path  scale,  129 
movies  for  web  browser,  323-326 
options  for  video,  294-295 
Stage  for  full-screen  mode,  15 
scripting 

terminology  for,  221-222 
writing  in  Actions  panel,  223-224 
scrolling  background,  329,  330-332 
selecting 

different  sound  files,  283 
selection  tools  used  for,  73 
static  text,  258 
strokes  and  fills,  48 
tools,  33-34 
Selection  tool 

changing  shape  contours  with,  50 
editing  curves  with,  61,  73 
semicolon  (;),  222 
shape  hints 

adding,  191-194 
defined,  191,  205 
placing,  192 


shape  tweens 

animating  color  of  gradient  fills, 
195-197 

animating  masks  and  masked 
layers,  200-204 
applying,  182-183,  205 
broken,  187 

changing  shapes  with,  179 
changing  variable  width  strokes 
with,  190 
creating,  181-183 
defined,  180,  205 
extending,  186-187 
inserting  additional,  184-186 
maximum  shape  hints  per,  194 
motion  tweens  vs.,  205 
moving  keyframes  of,  184 
using  ease-in  or  ease-out,  204 
shapes 

adjusting  transparency  of,  62-63 
animating,  180 
changing  contours  of,  50 
creating,  47-48 
drawing  mode  effect  on,  52 
editing,  49-51 
fills  and  strokes  for,  46 
placing  in  keyframes,  181-182 
previewing  animation  of,  195 
shortcuts.  See  keyboard  shortcuts 
showing/hiding 

controller  for  FLVPlayback 
component,  303 
layers,  19,  114 
movie  clips,  96-97 
tools,  33,  43 

SimController,  357-360,  365 
skin 

changing  color  of,  303 
defined,  300,  315 
selecting  in  Import  Video  wizard, 
300 

smoothing  bitmap  images,  30 
snippets.  See  Code  Snippets  panel 
sound 

about  sound  sync,  287 
adding  to  button  Down  keyframe, 
212-213 

advanced  export  options  for, 
297-298 

deleting  or  changing,  283 
editing  length  of,  279-280,  315 
importing,  275-276 
lesson  files  for,  272-274 
modifying  volume  of,  281-282 
placing  on  Timeline,  277-278 
preventing  overlapping,  306 
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sound  (< continued ) 

selecting  compression  quality  of, 
283-285 

synchronizing  with  embedded 
video,  306 

types  compatible  with  Flash,  275 
Sound  Settings  dialog  box,  284 
span-based  selection  of  keyframes,  118 
special  effects 

Blur  filter,  99-100 
positioning  objects  in  3D,  101-103 
splitting  motion  tween,  135-136 
sprite  sheets,  144 
Stage 

about,  15,  43 

adding  item  from  Library  panel 
to,  18 

adding  text  field  borders  for,  264 
changing  properties  of,  16 
choosing  dimensions  for,  11 
editing  symbols  in  place,  88-90, 107 
FLVPlayback  component  on,  301 
illustrated,  9,  13 
importing  item  to,  17 
matching  size  to  Photoshop 
canvas,  83 

naming  text  boxes  for,  265-266 
object  positioning  on,  28-30 
resizing  and  content  scaling  for, 
38-39 

text  positioning  on,  255 
starting  Flash,  10 
static  text 

adding  hyperlinks  to,  66-67,  269 
creating,  261-262 
defined,  253,  269 
properties  for,  259-260 
selecting,  258 
stop  action,  225 
stopping 

all  sound  before  starting  new,  306 
animations  at  specific  frame, 
241-243 
sound,  278 

String  data  in  ActionScript  code,  268 
strokes 

adjusting  width  of,  73 
changing  width  with  shape 
tweening,  190 
default,  48 
defined,  46 

editing  properties  for,  51 
effect  of  shape  tweens  on,  205 
graphics  tablets  and,  59 
morphing  changes  with  shape 
tweens,  180,  205 


sampling,  66 
selecting,  48 
transparent,  62 

unrecognized  in  Mask  layer,  198 
variable-width,  57-58 
Subselection  tool,  61,  73 
substitute  fonts,  208 
SVG  format,  70-72 
Swap  Symbol  dialog  box,  215-216 
swapping 

motion  tween  targets,  131-132 
symbols,  215-216 
SWF  files 

embedded  fonts  and  size  of,  264 
published  when  testing  movies, 

37,  143 

publishing  and  displaying,  319,  364 
symbols,  74-107.  See  also  buttons; 
instances;  movie  clip  symbols 
breaking  apart  symbol  instances, 
90-91 

button,  80,  209,  214-215 
defined,  75,  79,  107 
editing  methods  for,  87-90,  107 
graphic,  80 

importing  Illustrator,  78 
instances  vs.,  79 

methods  for  creating,  80-81,  107 
movie  clip,  79-80,  98 
organizing  in  folders,  86 
required  for  motion  tween,  113, 145 
swapping,  215-216 
types  of,  75 

synchronizing  sound,  287,  306 
syntax  for  ActionScript,  222-223 
system  requirements,  3 


tablets 

support  for  graphics,  59 
using  different  video  formats  for,  291 
targets 

adding  hyperlink,  260-261 
choosing  device  for  encoded  video, 
312-314,  315 

swapping  motion  tween,  131-132 
Test  Movie  mode,  143 
testing 

ActionScript  for  compiler  errors,  229 
clearing  publish  cache  before 
video,  319 

Flash  projects  on  mobile  devices,  365 
mobile  devices,  357,  365 
movies,  36-37,  205 
nested  animations,  135 


scripted  animations,  241-242 
sound  files  on  Timeline,  278 
video  in  FLVPlayback  component, 
302 

text,  64-67,  248-269.  See  also  static 
text;  text  boxes 
adding,  64-65 
adding  titles,  254-255 
adjusting  line  spacing,  259 
breaking  apart,  254 
creating  user-input,  261-268 
dynamic,  253,  263,  264,  269 
embedding  fonts  for,  264,  269 
hyperlinks  to,  66-67,  260-262,  269 
input,  253,  261-268,  269 
inserting  paragraphs,  257-260 
integrating  in  documents,  269 
lesson  files  about,  250-252 
making  selectable,  258 
modifying  characters  of,  256 
static,  253,  269 
substituting  fonts  for,  76,  208 
vertical,  255-256 
when  and  where  to  add,  252-253 
text  boxes 

adding  text  display  fields  in, 
262-264 

changing  contents  of,  248, 
266-267,  269 

defining  dimensions  of,  255 
naming,  265-266 
resizing,  258-259 
Text  tool,  64-65,  255 
Timeline,  18-27.  See  also  keyframes 
about,  18-19 

ActionScript  code  for  navigating, 
228 

adding  frames  to,  21-22,  224-225, 
278 

appearance  of,  27,  279 
attaching  ActionScript  to 
keyframes  on,  224,  247 
contained  in  movie  clip  symbol,  80 
converting  or  importing  layers  to, 
107 

extending  shape  tweens  on, 
186-187 

found  in  sound  and  video  lesson 
files,  273-274 
home  button  for,  233-236 
illustrated,  13,  18 
inserting  more  keyframes  on, 
184-186 

JavaScript  code  controlling, 
339-341 

keyframes  on,  22-24 
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layers  on,  19-21 
moving  keyframes  on,  184 
moving  playhead  to  destination 
frame,  238-242 

navigating  using  frame  labels,  247, 
274,  340 

Onion  Skin  Outlines  option  for,  195 
organizing  layers  in,  25-26 
placing  sound  files  on,  277-278 
previewing  animation  on,  143 
selecting  multiple  frames,  22 
stop  actions  to  pause  movies  on,  225 
using  classic  tween  on,  330-332 
using  Loop  Playback  option  for, 
188-189 
tools,  32-35 

accessing  hidden,  33,  43 
selecting  and  using,  33-34 
selection,  73 
3D,  101-104 

unsupported  by  document  types,  13 
Tools  panel,  13,  32 
tooltips  for  ActionScript,  223 
Trace  Bitmap  command,  85 
Transformation  tool,  126 
transformations 

animating,  124-126 
global  vs.  local,  104,  140 
resetting,  104-105 
transition  animations,  238-240 
transparencies,  62-64 
about,  62 

adjusting  instance,  95-96,  107 
animating,  118-120 
changing  Alpha  value  of  fill,  62-63 
making  button  instances,  244 
using  video,  303,  305-306 
working  with  transparent  button 
instances,  244-245 
Tween  layers,  111,  113 
tweens.  See  also  motion  tweens;  shape 
tweens 

classic,  328,  330-332 


undoing 

bitmap  conversions,  70 
steps,  35-36,  43 
ungrouping  objects,  57 
Up  keyframes,  214,  237 
Up  state,  210,  285 
updating  Flash,  42 


V 

vanishing  point,  105-106 
variable-width  strokes,  57-58,  190 
variables,  221 
vector  art,  69-70,  85 
vertical  text,  255-256 
video.  See  also  movies 

adjusting  length  of,  295-296 
advanced  options  for  Export 

Settings  dialog  box,  297-298 
choosing  target  device  for 
encoding,  312-314,  315 
controlling  playback  of,  302-303 
converting  file  formats  for,  289-290 
cropping,  292-295 
embedding  Flash,  306-311 
exporting  from  Flash,  311-312 
external  storage  of,  299 
files  needed  to  play  in  web 
browsers,  364 

importing  clip  with  Import  Video 
wizard,  304-306 
lesson  files  for,  272-274 
options  for  Flash,  287 
playback  of  external,  299-302 
playing  in  Flash,  315 
preventing  overlapping  sounds,  306 
setting  cue  points,  296 
skin  for,  300,  303,  315 
ways  to  deliver  Flash,  287 
working  with  transparencies  in, 

303,  305-306 
void  term,  227 

volume  of  sound  files,  281-282 

w 

warnings  messages,  342-343 
Watch  Folders  panel  (Media  Encoder), 
288,  291 
WAV  files,  275 
waveform 

defined,  275 

editing  length  of,  279-280,  315 
fading  in/out,  281-282 
web  address  URLs,  261 
web  browsers 

files  needed  to  play  Flash  movie 
in,  364 

Flash  playback  environments  for,  318 
sizing  and  scaling  movies  for, 
323-326 


WebGL 

about,  11,  12,  13 
features  unsupported  in,  319 
publishing  animations  in,  356 
video  playback  unsupported  for,  287 
when  and  where  to  add  text  in,  253 
Welcome  screen,  10 
Width  tool,  73 
Windows 

publishing  AIR  desktop  projector 
for,  355 

QuickTime  for,  287,  312 
warning  messages  using  Air  Debug 
Launcher,  358 
workspace,  13-17 
choosing  new,  14 
illustrated,  13 
Library  panel,  17-19 
Properties  inspector,  28-30 
saving,  14-15 
Stage,  15-16 
Timeline,  18-27 
Tools  panel,  32-35 
working  with  panels,  31 
writing  ActionScript  code,  228 

X 

X-properties,  152-153,  175-176 
.xfl  files 

about,  12,  40 

modifying  documents,  40-41 
opening,  10 

publishing  projects  as,  318 
saving,  40 

Y 

Y-properties 

editing  in  curve,  152-153 
setting  vertical  values,  153 
using  different  ease  for  X-  and, 
175-176 

Z 

zoom  levels,  159 
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